React Router

📌 React Router

페이지 이동을 도와주는 라이브러리

정확히는 페이지를 이동하는 것이 아니라 같은 페이지에서 Router를 이용해 다른 컴포넌트들을 보여주는 것 뿐임.

설치

cd 프로젝트폴더
npm install react-router-dom
// 혹은 yarn add react-router-dom

버전 업그레이드 되면서 바뀌는 부분들은 React Router 사이트에서 확인하기.
https://reactrouter.com/en/main

사용방법

import {BrowerRouter} from 'react-router-dom'

Outlet

부모 Route에서 자식 Route를 보이게 할 수 있고, 나오는 위치도 설정할 수 있다.

import

import { Outlet } from 'react-router-dom'

사용하기
<Outlet />

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Navigation />}>
        <Route index element={<Home />} />
      </Route>
    </Routes>
  );
};

const Navigation = () => {
  return (
    <div>
      <div>
        <h1>navigation bar</h1>
      </div>
      <Outlet />
    </div>
  );
};

Link

<Link to='이동경로' element={<보여줄 컴포넌트/>}/>