[Router] RouterProvider와 CreateBrowserRouter

React에서 RouterProvider와 CreateBrowserRouter를 이용하여

다중 페이지를 구현하는 법에 대해 알아보겠습니다.

 

 

[ 기존 방식 ] 

 

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>
  )
}
Colored by Color Scripter
cs
 

 

[  React Router v6.4 이후 추가된 방식  ]

 

📌 RouterInfo.js 

 

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'
      },
    ]
  },
]

 

📌 App.js

 

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

 

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

 

 

ref: https://reactrouter.com/en/main/start/overview