[리액트] 라우터 v6.4 createBrowserRouter

createBrowserRouter

createBrowserRouter는 react router v6.4부터 사용할 수 있다.

 

 

 

라우터 생성

createBrowserRouter()

createBrowserRouter()에 라우팅 할 path와 element로 작성할 수 있다. children 속성으로 배열에 중첩된 라우터(Nested Router)를 추가해 줄 수 있다.

import { createBrowserRouter } from "react-router-dom";
import Login from "../pages/Login";
import Join from "../pages/Join";
import Layout from "../layout/Layout";
import Main from "../pages/Main";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/",
        element: <Main />,
      },
      {
        path: "/login",
        element: <Login />,
      },
      {
        path: "/join",
        element: <Join />,
      },
    ],
  },
]);

 

 

 

 

App.jsx

최상단에서 <RouterProvider> 를 import한다.
RouterRrovider에는 router={} props를 필수로 넣어야하고, Router.jsx에서 createBrowserRouter 함수로 생성한 router를 넘겨준다.

import React from "react";
import { RouterProvider } from "react-router-dom";
import { router } from "./router/Router";

const App = () => {
  return <RouterProvider router={router} />;
};

export default App;