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

React Router v6

 

이전의 react 라우터 작성 방식

<Router>
    <Route path="/">
        <Home/>
    </Route>
    <Route path="/rooms/:id">
        <RoomDetail>
    </Route>
</Router>

 

6.4의 새로워진 라우터 작성 방식

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

const router = createBrowserRouter([])

createBrowserRouter라는 함수를 이용해서 이 안에 라우터 배열을 두고 사용한다.

 

path = "url"

element = 해당 링크에서 보여줄 컴포넌트

import { createBrowserRouter } from "react-router-dom";
import Root from "./components/Root";

const router = createBrowserRouter([
    {
        path: "/",
        element: <Root/>
    }
])

export default router;

루트 render에는 <App /> 대신 RouterProvider 에 router를 위의 라우터로 설정해준다.

root.render(
  <React.StrictMode>
    <ChakraProvider>
      <RouterProvider router={router} />
    </ChakraProvider>
  </React.StrictMode>
);

 

중첩라우팅

root에 footer와 header 두기

const router = createBrowserRouter([
    {
        path: "/",
        element: <Root/>,
        children: [
            {
                path: "",
                element: <Home/>,
            },
            {
                path: "users",
                element: <User/>,
            },
        ],
    }
])

/ root 라우터의 자식요소로 다른 컴포넌트 넣기

 

import { Outlet } from "react-router";

export default function Root() {
    return (
        <h1>
            This is Root
            <Outlet/>
        </h1>
    );
}

그리고 Root.tsx 파일에는 루트 내에 넣어줄 다른 컴포넌트를 표시할 outlet을 넣어준다.