React
[리액트] 라우터 v6.4 createBrowserRouter
ejunyang
2024. 6. 24. 19:39
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;