React Router 子階層のルーティング

はじめに

React Routerで子階層のルートが複数存在する場合、子ルートへの遷移をどう書けばいいかわからなくなったので備忘録。

検索したら出てきた解決案の一つ

App.tsxでRouter.tsxを呼び出し

App.tsx

import "./styles.css";
import { ChakraProvider } from "@chakra-ui/react";
import { BrowserRouter } from "react-router-dom";

import { Router } from "./router/Router";

import theme from "./theme/theme";

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      <BrowserRouter>
        <Router />
      </BrowserRouter>
    </ChakraProvider>
  );
}

・/home
・/home/user_management
・/home/setting
と子階層に遷移したいとき

Router.tsx

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

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

export const Router: FC = memo(() => {
  return (
    <Routes>
      <Route path="/" element={<Login />} />
      <Route path="home" element={<Home />}>
        <Route path="user_management" element={<UserManagement />} />
        <Route path="setting" element={<Setting />} />
      </Route>
    </Routes>
  );
});

Outlet部分にUesrManagementやSettingに当たるコンポーネントがネストされる。

Home.tsx

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

export const Home: FC = memo(() => {
  return (
    <div>
      <p>HOME</p>
      <Outlet />
    </div>
  );
});

だがしかし、やりたいことはあくまで子階層に「遷移」すること。
あとぱっと見、見栄えが良くない気がする。

【解決】ルートパスを別ファイルに切り出してmapで展開

ルートパスを別ファイルで管理する。

HomeRoutes.tsx

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

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

HomeRoutesを呼び出して、定義している各ルートをmap()で展開。
HomeRoutes.tsxで、pathの記載だけ注意すれば、これだけで実現が可能。

Router.tsx

import { homeRoutes } from "./HomeRoutes";

    <Routes>
      <Route path="/" element={<Login />} />
      <Route path="/home">
        {homeRoutes.map((route) => (
          <Route key={route.path} path={route.path} element={route.children} />
        ))}
      </Route>
    </Routes>

おわりに

今回初投稿でした。 最近ReactやNext.jsの学習を始めたんですが、ReactRouterでさえv6とv5が大きく変わっていたりと、最新情報を追うのが大変ですね。 これからも気づきや学びをこまめに登校したいと思います。

何かご意見ございましたらご教授ください。