React Router

리액트에서 다른 컴포넌트 페이지로 이동할 수 있는 방법 중 React Router 라이브러리가 있다.

npm install react-router-dom

BrowserRouter

React Router를 쓰기 위해 가장 크게 사용하는 컴포넌트다.

Routes

각 경로를 지정 하기 전에 감싸주는 컴포넌트다.

Route

실질적으로 경로와 컴포넌트를 매칭 시켜주는 컴포넌트다.

사용형태

    <Router>
      <Routes>
        <Route path="/" element={<main />} />
        <Route path="/animal/:id" element={<Animal />} />
      </Routes>
    </Router>

Link

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

html의 a태그와 비슷하지만, 페이지를 새로고침 하지 않는다.

<Link to="/animal/2">Animal 2</Link>