React Routerの設定で、routes 配列を使ってルーティングの構成を管理する方法は非常に便利です。react-router-dom のバージョン6では、ルートの設定をこのように行います。以下は、routes 配列を使ってルーティングを設定する具体例です。

routes 配列によるルーティング設定

この例では、routes 配列を使ってルート設定を行い、アプリケーションのルート構成を管理します。

react-router-dom のインストール
pnpm install react-router-dom

1. ディレクトリ構成

src/
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   └── NotFound.jsx
├── routes/
│   └── index.jsx
├── App.jsx
└── main.jsx

2. src/routes/index.jsx

ここで、ルートの設定を行います

// src/routes/index.jsx
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';
import NotFound from '../pages/NotFound';

const routes = [
  {
    path: '/',
    element: <Home />,
    children: [
      {
        path: '/',
        element: <Navigate to="/index" />,
      },
      {
        path: 'index',
        element: <Home />,
      },
      {
        path: 'about',
        element: <About />,
      },
      {
        path: '*',
        element: <NotFound />,
      },
    ],
  },
];

function AppRoutes() {
  return (
    <Routes>
      {routes.map((route, index) => (
        <Route
          key={index}
          path={route.path}
          element={route.element}
        >
          {route.children && route.children.map((child, childIndex) => (
            <Route
              key={childIndex}
              path={child.path}
              element={child.element}
            />
          ))}
        </Route>
      ))}
    </Routes>
  );
}

export default function AppRouter() {
  return (
    <Router>
      <AppRoutes />
    </Router>
  );
}

3. src/App.jsx

App.jsx でルーティング設定ファイルをインポートします。

// src/App.jsx
import React from 'react';
import AppRouter from './routes';

function App() {
  return <AppRouter />;
}

export default App;

4. src/main.jsx

アプリケーションをレンダリングします。

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

説明

  • routes 配列: ルートの構成をオブジェクトの配列として管理します。各オブジェクトには path、element、および children が含まれます。
  • <Navigate />: ルートのリダイレクトを設定するために使用します。例えば、'/' にアクセスすると自動的に /index にリダイレクトされます。
  • AppRoutes コンポーネント: ルート配列をマッピングして Routes コンポーネントを生成します。

この構成により、ルーティングの管理が簡素化され、ルート設定が一元化されます。