ネストしたルーティングのパス設定

[cossack910]

Router.tsx

import { memo, FC } from "react";
import { Routes, Route } from "react-router-dom";

import { Login } from "../components/pages/Login";
import { homeRoutes } from "./HomeRoutes";
import { Page404 } from "../components/pages/Page404";
import { Home } from "../components/pages/Home";

export const Router: FC = memo(() => {
  return (
    <Routes>
      <Route path="/" element={<Login />} />
      <Route path="/home" element={<Home />}>
        {homeRoutes.map((route) => (
          <Route key={route.path} path={route.path} element={route.children} />
        ))}
      </Route>
      <Route path="*" element={<Page404 />} />
    </Routes>
  );
});

[cossack910]

/homeの中でネストしているので、子側のpathは スラッシュなしでパスをそのまま記述

ソース

import { Home } from "../components/pages/Home";
import { Setting } from "../components/pages/Setting";
import { UserManagement } from "../components/pages/UserManagement";
import { Page404 } from "../components/pages/Page404";

interface homeRoutesInterface {
  path: string;
  children: React.ReactNode;
}

export const homeRoutes: homeRoutesInterface[] = [
  {
    path: "user_management",
    children: <UserManagement />,
  },
  {
    path: "setting",
    children: <Setting />,
  },
  {
    path: "home",
    children: <Home />,
  },
  {
    path: "*",
    children: <Page404 />,
  },
];

[cossack910]

親コンポーネント Outletを表記しないと子コンポーネントが表示できない

ソース

import { memo, FC } from "react";
import { Outlet } from "react-router-dom";　←これ

export const Home: FC = memo(() => {
  return (
    <>
      <p>Homeページ</p>
      <Outlet />　←これ
    </>
  );
});

[cossack910]

ページごとの場合 https://zenn.dev/everyday_newbie/scraps/37e2ac522ea6c6