리액트 라우터 설치

리액트 URL에 따른 페이지 이동을 위한 라우터 생성 및 연결 방법입니다.

 

1. react-router-dom 설치 

npm i react-router-dom
yarn add react-router-dom

 

2. router.js 생성

import { createBrowserRouter } from "react-router-dom";

// 페이지 import
import Login from "./pages/Login";
import Main from "./pages/Main";
import Board from "./pages/Board";

// 페이지 path와 import된 js 파일 적용 및 export
export const router = createBrowserRouter([
    {
        path: "/",
        element: <Login />,
    },
    {
        path: "/agree",
        element: <Main />,
    },
    {
        path: "/regist",
        element: <Board />,
    }
]);

 

3. index.js에서 라우터 불러오기

import {RouterProvider} from "react-router-dom";
import {router} from './router';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <RouterProvider router={router} />
  </React.StrictMode>
);