?key=value
를 입력하는 형식을 queryString 이라고 한다.사용법
?name=mark
export default function Home(props) {
const searchParams = props.location.search;
const urlObj = new URLSearchParams(searchParams);
console.log(urlObj.get("name"));
return <div>Home 페이지 입니다.</div>;
}
npm i query-string
import queryString from "query-string";
export default function Home(props) {
const searchParams = props.location.search;
const query = queryString.parse(searchParams);
console.log(query); // {name : "mark"}
return <div>Home 페이지 입니다.</div>;
}
여러 route 중 순서대로 먼저 맞는 하나만 보여준다.
exact를 뺄 수 있는 로직을 만들 수 있다.
가장 마지막에 어디 path 에도 맞지 않으면 보여지는 컴포넌트를 설정해서, "Not Found" 페이지를 만들 수 있다.
import { BrowserRouter, Route } from "react-router-dom";
import { Switch } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import About from "./pages/About";
import NotFound from "./pages/NotFound";
import { Btn } from "./components/button";
import "./App.css";
function App() {
return (
<div id="app">
<BrowserRouter>
<Switch>
<Route path="/Profile/:id" component={Profile} />
<Route path="/About" component={About} />
<Route path="/" exact component={Home} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
<Btn />
</div>
);
}
export default App;
import { Link } from "react-router-dom";
export default function Links() {
return (
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/About">About</Link>
</li>
<li>
<Link to="/Profile">Profile</Link>
</li>
<li>
<Link to="/Profile/1">Profile/1</Link>
</li>
<li>
<Link to="/?name=Mark">Home/?name=Mark</Link>
</li>
</ul>
);
}
<NavLink
to="/About?name=keunyeong"
activeStyle={{ color: "red" }}
isActive={(match, location) => {
console.log(match === null);
console.log(location);
return location.search !== "";
}}
>
About?name=keunyeong
</NavLink>
export default function Login(props) {
console.log(props);
const login = () => {
setTimeout(() => {
props.history.push("/");
}, 1000);
};
return (
<div>
<h2>로그인 페이지 입니다.</h2>
<button onClick={login}>로그인</button>
</div>
);
}
// Login.jsx
import LoginButton from "./LoginButton";
export default function Login(props) {
return (
<div>
<h2>로그인 페이지 입니다.</h2>
<LoginButton {...props} />
</div>
);
}
// LoginButton.jsx
import { withRouter } from "react-router-dom";
export default withRouter(function LoginButton(props) {
console.log(props);
const login = () => {
setTimeout(() => {
props.history.push("/");
}, 1000);
};
return <button onClick={login}>로그인</button>;
});
render={()=>{return isLogin ? : }}
import { BrowserRouter, Route, Redirect } from "react-router-dom";
import { Switch } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import About from "./pages/About";
import NotFound from "./pages/NotFound";
import Links from "./components/links";
import NavLinks from "./components/NavLinks";
import Login from "./components/Login";
import "./App.css";
const isLogin = true;
function App() {
return (
<div id="app">
<BrowserRouter>
<Links />
<NavLinks />
<Switch>
<Route path="/Profile/:id" component={Profile} />
<Route path="/Profile" component={Profile} />
<Route
path="/Login"
render={() => {
return isLogin ? <Redirect to="/" /> : <Login />;
}}
/>
<Route path="/About" component={About} />
<Route path="/" exact component={Home} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
import './App.css';
전역 css style로 설정됨.
npm i sass
App.module.scss
npm i classnames
import classNames from 'classnames';
console.log(classNames('foo',{bar:true});
// foo bar
console.log(classNames('foo',{bar:false});
// foo
css.module 를 사용하기 위해서 bind 방식을 제공한다.
bind 인자로 styles 를 넣고 변수에 담아두면
변수의 인자로 styles 에 설정해놓은 class 만 넣어도 변환해준다.
import styles from './Button.module.css
import classNames from 'classnames/bind';
const cx = classNames.bind(styles);
console.log( cx('button','loading') );
// Button_button_2ce79 Button_loading_XEngF