Install

npm i react-router-dom@6

• 저는 6 version 대를 설치해서 createBrowserRouter를 사용합니다

Setup

import { createBrowserRouter } from "react-router-dom";
import "./Root"
import Root from "./Root";

const router = createBrowserRouter([
    {
        path: '/',
        element: <Root/>
    }
])

export default router;

• Router.tsx 파일을 작성합니다.
• <Root/> 는 임의로 아무 컴포넌트로 만들어도 됩니다. 저는 초기에는 h1 태그를 return하는 컴포넌트로 만듭니다.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './Router'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
)

• main.tsx 파일에서 RouterProvider 를 삽입하고, router에는 Router.tsx 파일에서 export한 router를 전달합니다.