react-routerでのネストされたルーティング定義がうまくいかない

はじめに

• react-routerの話

問題

• /home/*なpathで全て<Home /> が表示される

import { type FC, memo } from "react";
import { Route, Routes } from "react-router";
import { Login } from "../components/pages/Login.tsx";
import { homeRoutes } from "./HomeRoutes";

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.element} />
        ))}
      </Route>
    </Routes>
  );
});

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

export const homeRoutes = [
  {
    path: "",
    element: <Home />,
  },
  {
    path: "user-management",
    element: <UserManagement />,
  },
  {
    path: "setting",
    element: <Setting />,
  },
];

解決

• elementに余計な記述あったので消して解決

import { type FC, memo } from "react";
import { Route, Routes } from "react-router";
import { Login } from "../components/pages/Login.tsx";
import { homeRoutes } from "./HomeRoutes";

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

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

export const homeRoutes = [
  {
    path: "",
    element: <Home />,
  },
  {
    path: "user-management",
    element: <UserManagement />,
  },
  {
    path: "setting",
    element: <Setting />,
  },
];

終わりに