No routes matched locationと出力されてしまう件

はじめに

Routerの設定を行い、urlを入力し、適切な画面が出力されるかどうか調査しました。

前回の記事は以下。
https://qiita.com/o68606007/items/c1b6999b6163fd5c23ae

問題

Routerの設定を行い、画面遷移するか確かめようとしたのですが、
No routes matched location "/home/user_management"
と出力されてしまいます。
エラー原因は何かを調査するのに時間を溶かしました。

Router

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

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

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

解決方法

elememtの記載方法に問題がありました。
React Router v6 では
<Route element={<Routes>...</Routes>} />
の記載方法は誤っています。

Router

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

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

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

前回elementのことを書いていましたが、まだ注意する箇所がありました。
また、絶対パスの箇所は相対パスの記載に変更しました。

HomeRoutes

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

export const homeRoutes = [
  {
    path: "",
    exact: true,
    children: <Home />,
  },
  {
    path: "user_management",
    exact: false,
    children: <UserManagement />,
  },
  {
    path: "setting",
    exact: false,
    children: <Setting />,
  },
];

おわりに

参考