React. Router

⊙ React Router

// React-Router install
yarn add react-router-dom

// index.js setting
import { BrowserRouter } from 'react-router-dom';
(...)
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

⊙ Router Route

import { Route } from 'react-router-dom';
(...)
// exact 속성을 추가하면 경로가 정확히 일치할때만 보여준다.
<Route exact path="/">
</Route> 
<Route path="/detail">
</Route>

⊙ Router Link

import { Link } from 'react-router-dom';
(...)
 <a href="/">Home<a/>
 // 👇🏻👇🏻👇🏻
 <Link to="/">Home</Link>

 import { useHistory } from 'react-router-dom';
 
 let history = useHistory();
 history.goBack();
 (...)
 // push 함수 사용으로 페이지 이동가능
 history.push('/');

⊙ Router Switch

 import { Switch } from 'react-router-dom';
 (...)
 <Switch>
     <Route exact path="/" component={Main} />
     <Route path="/detail" component={Detail} />
     <Route path="/:id">
         <div>잘못된 페이지입니다.</div>
     </Route>
 </Switch>