React. Router

React. Router

⊙ React Router

• 클라이언트에서 이뤄지는 라우팅을 간단하게 해주며 서버 렌더링을 도운다.
• js 파일을 이용해 페이지에서 기존 컴포넌트를 언마운트 시키고 다른 컴포넌트를 마운트 한다.
• 이로써 웹 헤더 컴포넌트처럼 모든 페이지에서 존재하는 컴포넌트의 경우 페이지가 변해도 렌더링이 생략된다. (Tiles / Decorator)
  
• HashRouter : 라우팅 안전하게 할 수 있게 도와준다.
  (주소 뒤에 #이 붙어 서버 라우팅 방지)
  

// 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

• Link는 클릭하면 다른 주소로 이동시키는 컴포넌트이다.

• 리액트 라우터를 사용할땐 일반 a 태그를 사용하시면 안된다.

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

• Switch는 Route들을 묶는 역할을 수행합니다.

• 가장 먼저 path에 매치되는 Route에 연결시킵니다.

• 하나의 Route만 선택하기 때문에 중복 Route 방지한다.

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