CreateBrowserRouter

아래는 React Router v6.4 에 새롭게 추가된 방식에 대한 내용이다.

기존 방식

기존의 BrowserRouter, Routes, Route 를 사용하는 방식은 아래와 같다.

1. 최상단 root에서 BrowserRouter로 전체를 감싼다.

import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter> // 최상단 root에서 BrowserRouter로 감싸기
      <App /> 
  </BrowserRouter>
)

2. Routes, Route를 통해 경로를 표현한다.

import { Route, Routes } from 'react-router-dom'

const App = () => {
  return (
    <Routes>
      <Route path='/' element={<Layout />} > // outlet을 이용한 중첩라우팅
        <Route index element={<Main />} /> 
        <Route path='/pageA' element={<PageA />} />
        <Route path='/pageB' element={<PageB />} />
        <Route path='/pageC' element={<PageC />} />
      </Route>
      </Routes>
  )
}

3. 중첩라우팅의 경우 Route컴포넌트의 하위에 또 다른 Route컴포넌트를 추가한다.
   또한 상위 컴포넌트에서 Outlet를 사용해 하위 컴포넌트의 위치를 조절할 수 있다.

추가로 index 값을 컴포넌트의 속성으로 추가하여 default child routes 로 설정할 수 있다.

CreateBrowserRouter 방식

기존의 방식처럼 최상단 root에서 BrowserRouter로 전체를 감싸지 않고,
RouterProvider 를 이용한다.

import { createBrowserRouter, RouterProvider, } from 'react-router-dom';
import { router } from './util/router';

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

createBrowserRouter 를 사용하여 아래와 같이 경로를 설정해준다.

import Layout from '../Layout'
import Main from '../pages/Main';
import PageA from '../pages/PageA';
import PageB from '../pages/PageB';
import PageC from '../pages/PageC';

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Main />,        
      },
      {
        path: "/pageA",
        element: <PageA />,       
      },
      {
        path: "/pageB",
        element: <PageB />,       
      },
      {
        path: "/pageC",
        element: <PageC />,        
      },
    ]
  },
]);

-> react Router 참고