[React] react router dom, RouterProvider와 CreateBrowserRouter

before

버전 : react-router-dom@^6.3.0
내가 기존에 작업하던 방식

1. 최상단에 browserRouter로 감싸기

2. 경로 설정하기

3. nav Link 연동하기

// 1. 최상단에 browserRouter로 감싸기
<BrowserRouter><App /></BrowserRouter>

// 2. 경로 설정하기
<Routes>
  <Route path="/" element={<Home />} /> 
  <Route path="/mypage/*" element={<MyPage />} >
    <Route path=":id" element={<MyPost />}/> //중첩 라우팅
  </Route>
  <Route path="/dashboard" element={<Dashboard />} />
</Routes>
// 3. nav Link
<ul>
  <li>
    <Link to="/">Home</Link>
  </li>
  <li>
    <Link to="/mypage">MyPage</Link>
  </li>
  <li>
    <Link to="/dashboard">Dashboard</Link>
  </li>
</ul>

After

프리온보딩을 통해 알게된 방식. v6.4에 추가되었다.

1. BrowserRouter로 감싸지 않는다.

RouterProvider를 import해서 router를 제공하면 됨.

2. 이때 CreateBrowserRouter로 경로를 지정해준다.

children으로 중첩 라우팅이 가능함.

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

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider
    router={router}
    fallbackElement={<BigSpinner />}
  />
);

3. outlet

이건 프리온보딩에서 나온 건 아니고 찾아보다가 알게 된 건데..
하위 경로 요소를 렌더링하고 싶을 때 상위경로 요소에서 사용한다.

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}
const router = createBrowserRouter([
  {
    path: "dashboard",
    element: <Dashboard />,
    children: [
      {
        path: "messages",
        element: <DashboardMessages />,
      },
      {
        path: "tasks",
        element: <DashboardTasks />,
      },
    ],
  },
]);