[React] 리액트 라우터 - RouterProvider와 CreateBrowserRouter

서론

이번에는 원티드 프리온보딩을 통해서 지금까지 프로젝트에 사용했던 라우터 방식말고
새로운 방식이 있다는 것을 알게 되어서 이 글을 작성하면서 정리하게 되었습니다.
이번에 정리하면서 작업해 볼 방식은 React Router v6.4에 추가된 방식입니다.

기존 방식

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

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

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>
  )
}

RouterProvider와 CreateBrowserRouter

0. 폴더구조

1. router.jsx

기존 방식과는 다르게 새로운 컴포넌트를 만들어서 route 링크 들만 따로 분리를 시켜서 관리하도록 했습니다.
기존 구성에서 중첩 되어있는 경로는 children을 이용해서 중첩을 사용할 수 있습니다.

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 RouterInfo = [
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Main />,
        label: 'main'
      },
      {
        path: "/pageA",
        element: <PageA />,
        label: 'A'
      },
      {
        path: "/pageB",
        element: <PageB />,
        label: 'B'
      },
      {
        path: "/pageC",
        element: <PageC />,
        label: 'C'
      },
    ]
  },
]

2. createBrowserRouter & RouterProvider

우선 기존의 방식처럼 BrowserRouter로 감싸지 않습니다.
RouterProvider를 이용해서 구성요소들을 전달하고 활성화 합니다.

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

const RouterObject = createBrowserRouter(RouterInfo) 
//CreateBrowserRouter로 경로 지정

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

참고

React Router - What's New in 6.4?