💡 React router dom

리액트 라우터 Version6 사용방법에 대해 알아보자

1. Router.tsx

전체 어플리케이션의 Router를 설정한다.

import { createBrowserRouter } from "react-router-dom";
import NotFoundPage from "./pages/NoFoundPage";
import Main from "./pages/Main";
import Temp from "./pages/Temp";
import HooksInfo from "./pages/HooksInfo";
import HooksNavigate from "./pages/HooksNavigate";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Main />,
    errorElement: <NotFoundPage />,
    children: [
      {
        path: "hooksinfo",
        element: <HooksInfo />,
        children: [
          {
            path: ":hookvariety", // 다이나믹라우터(아무값이나 올수 있음)
            element: <HooksNavigate />,
          },
        ],
      },
      {
        path: "/temp",
        element: <Temp />,
      },
    ],
  },
]);

export default router;

2. index.tsx

RouterProvider을 이용해 전체 어플리케이션을 React-router-dom으로 감싼다.

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

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

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

✅ 중첩 라우팅

Outlet을 이용해 라우터에서 children으로 선언했던 페이지들을 동시에 라우팅 할 수 있다.

import { Link, Outlet } from "react-router-dom";

export default function HooksInfo() {
  return (
    <div className="flex flxe-col gap-2">
      <div>
        <Link to={"/hooksinfo/usecontext"}>UseContext</Link>
      </div>
      <div>
        <Link to={"/hooksinfo/usememo"}>UseMemo</Link>
      </div>
      <div>
        <Link to={"/hooksinfo/useref"}>UseRef</Link>
      </div>
      <Outlet />  // HooksInfo 페이지 밑에 children 페이지 중첩 라우팅
    </div>
  );
}