<aside> 💡 React-Router 에 대해서 알아보자

</aside>

리액트 라우터는 리액트에서 경로에 따라 페이지를 나누도록 해주는 라이브러리이다.

라우터

리액트 라우터를 사용하려면 라우터라는 컴포넌트가 필요하다, 그 중에 BrowserRouter 라는 걸 사용하는데, 이 컴포넌트를 최상위 컴포넌트에서 감싸주면 모든 곳에서 사용할 수 있다.

import { BrowserRouter } from 'react-router-dom';

function App() {
  return <BrowserRouter> ... </BrowserRouter>;
}

페이지 나누는 방법

Routes 컴포넌트 안에다가 Route 컴포넌트를 배치해서 각 페이지를 나눠줄 수 있다. Routes 안에서는 위에서부터 차례대로 Route 를 검사하는데,

현재 경로와 path prop이 일치하는 Route 를 찾는다.

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="posts" element={<PostListPage />} />
  <Route path="posts/1" element={<PostPage />} />
</Routes>

링크

리액트 라우트에서는 a 태그 대신에 Link 컴포넌트를 사용한다. to 라는 prop 으로 이동할 경로를 정해주면 된다.

<Link to="/posts">블로그</Link>

하위 페이지 나누기

Route 컴포넌트 안에다가 Route 컴포넌트를 배치하면 된다, 이때 하위 페이지에서 최상위 경로에 해당하는 경로를 path prop이 아니라 index 라는 prop을 사용하면 된다.