React - 리액트 라우터 (react-router-dom)

일반적으로 우리는 한 화면에 모든 것을 담을 수 없기에 주소별로 화면을 구분 짓는다. 예를 들어

• /home 기본적인 화면들을 보여준다.
• /login 로그인 페이지를 보여준다.
• /products 상품들을 보여준다.

리액트에서는 어떻게 할 수 있을까?

🕸 react-router-dom

react-router dom은 우리가 하고싶은 것을 하게 해준다. 먼저 리액트 앱에 react-router-dom을 설치 해보자.

npm install react-router-dom

작성일 기준으로 v6가 최신 버전이기때문에 v6기준으로 설명하도록 하겠다. 다른 버전은 문법이 다를 수 있기 때문에 주의바람

import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="main" element={<Main />} />
          <Route path="login" element={<Login />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

구성 요소

• BrowserRouter
  URL과 UI를 동기화 시킴
• Routes
  Route들을 감싸서 규칙이 일치하는 라우트 하나만 렌더링 시킴
• Route
  path에 경로를, element에 컴포넌트를 넣는다.

이외 react-router-dom v6 기능

- useNavigate

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

function Main() {
  const navigate = useNavigate();

  return (
    <div>
      <button onClick={() => navigate("/login")}>로그인</button>
    </div>
  );
}

이전 버전에서는 useHistory로 사용했지만 v6에서는 useNavigate로 변경되었다. 기본적으로 이동할 경로를 입력해서 url을 조작할 수 있다.
navigate('url',{ option }); 형태로 옵션에 state, reaplce( default = false ) 여부 등을 설정 할 수 있다.