Reactでルート定義の分割について学ぶ

学んだこと

ルート定義をどう管理するか

• ルート定義用のファイルを用意し、その中でルート定義を記述する。
  • ルート定義の中で render を使用しているなど定義が複雑化する場合は、その定義自体別ファイルに分けるなど適宜管理しやすいように定義を切り出していくことが大事。

実際にルート定義を別ファイルで書いてみた

• Router.jsx
  • ルート定義用ファイル
  • 複雑化する定義(render している箇所)は別途定義ファイルを用意している。

import { Switch, Route } from 'react-router-dom';

import { Page2 } from '../Page2';
import { Home } from '../Home';
import { page1Routes } from './Page1Routes';

export const Router = () => {
  return (
    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route
        path="/page1"
        render={({ match: { url } }) => (
          <Switch>
            {page1Routes.map((route) => (
              <Route
                key={route.path}
                exact={route.exact}
                path={`${url}${route.path}`}
              >
                {route.children}
              </Route>
            ))}
          </Switch>
        )}
      ></Route>
      <Route path="/page2">
        <Page2 />
      </Route>
    </Switch>
  );
};

• Page1Routes.jsx
  • Page1 内のルート定義用ファイル
  • ここでは、パス・exact 判定・子どものデータを配列として持っている。
  • そのため、外部で配列を呼び出し、配列をループさせることで配列内すべての定義を設定することができる。

import { Page1 } from '../Page1';
import { Page1DetailA } from '../Page1DetailA';
import { Page1DetailB } from '../Page1DetailB';
export const page1Routes = [
  {
    path: '/',
    exact: true,
    children: <Page1 />,
  },
  {
    path: '/detailA',
    exact: false,
    children: <Page1DetailA />,
  },
  {
    path: '/detailB',
    exact: false,
    children: <Page1DetailB />,
  },
];

• App.jsx
  • ここで Route コンポーネントを呼び出している
  • 前回までは App コンポーネント内でルート設定を行っていた。
  • ここでルート設定を行うと、管理しづらいため別コンポーネントとして切り出すようにした。

import { BrowserRouter, Link } from 'react-router-dom';
import { Router } from './router/Router';
import './App.css';
export default function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Link to="/"> Home </Link>
        <br />
        <Link to="/page1">Page1</Link>
        <br />
        <Link to="/page2">Page2</Link>
      </div>
      <Router />
    </BrowserRouter>
  );
}