설치

npm install react-router-dom

또는

yarn add react-router-dom

사용 방법

BrowserRoute

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import Login from './Login';
import Main from './Main';

function Router() {
  return (
    <BrowserRouter>
      <Login />
      <Main />
    </BrowserRouter>
  );
}

export default Router;

• BrowserRouter를 import한다.
• 그리고 link를 나눌 컴포넌트를 감싼다.
  
  

Routes

import React from 'react';
import { BrowserRouter, Routes } from 'react-router-dom';
import Login from './Login';
import Main from './Main';

function Router() {
  return (
    <BrowserRouter>
      <Routes>
         <Login />
         <Main />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

• Routes를 import하고 컴포넌트를 한번 더 감싼다.
  
  

Route

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Login from './Login';
import Main from './Main';

function Router() {
  return (
    <BrowserRouter>
      <Routes>
      	 <Route link="/" element={<Login />} />
      	 <Route link="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

• Route를 import한다.
• link에는 주소, element에는 해당 링크에 보여줄 컴포넌트를 입력한다.
• 참고로 Route는 중첩이 가능하다.
  
  

useNavigate

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

const Login = () => {
  const navigate = useNavigate();

  const goToMain = () => {
    navigate('/main');
  };

  return <button onClick={goToMain}> 메인으로 </button>
};

export default Login;

• useNavigate를 import한다.
• navigate에 useNavigate()를 할당한다. (navigate도 함수)
• 버튼을 클릭할 때 실행 할 함수를 선언한다.
• navigate()에 이동할 링크를 넣는다.
• 참고) navigate(-1) : 한단계 뒤로