Reactアプリケーションでページ遷移を管理する際に使用されるのがReact Routerです。TypeScriptを組み合わせることで、ルートやナビゲーションに型安全性を持たせることができ、予期しないエラーを防ぐことができます。この章では、基本的なルーティング、動的なルーティングを個別に解説しながら、TypeScriptを用いた型付け方法を紹介します。

基本的なルーティング

基本的なルーティングでは、URLごとに異なるコンポーネントを表示します。React Routerを使うと、RoutesとRouteコンポーネントを利用してルートの設定を行います。

基本例

以下は、HomeとAboutの2つのページを持つアプリケーションの例です。

import React from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
} from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

解説

• BrowserRouter: URLの履歴を管理します。
• RoutesとRoute: 各ルートと対応するコンポーネントを関連付けます。
• Link: ページ遷移のためのリンクを作成します。

この例では、/にアクセスするとHomeコンポーネントが、/aboutにアクセスするとAboutコンポーネントが表示されます。

動的なルーティング

動的なルーティングでは、URLの一部を変数として扱い、その値に基づいて表示内容を変更します。

動的ルートの例

以下は、製品IDを含む動的なルートの例です。

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';

interface ProductParams {
  id: string;
}

const Product = () => {
  const { id } = useParams<ProductParams>();
  return <h1>Product ID: {id}</h1>;
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/product/:id" element={<Product />} />
      </Routes>
    </Router>
  );
};

export default App;

解説

• useParams: URLパラメータを取得するためのフック。
• ProductParams: URLパラメータの型定義。

この例では、/product/123にアクセスするとProduct ID: 123が表示されます。

型安全なルート定義

アプリケーションが成長するにつれて、ルートパスの管理が複雑になることがあります。ルートパスを中央で管理し、型で保証することで保守性を向上させることができます。

ルート定義の例

interface Routes {
  HOME: '/';
  ABOUT: '/about';
  PRODUCT: '/product/:id';
}

const ROUTES: Routes = {
  HOME: '/',
  ABOUT: '/about',
  PRODUCT: '/product/:id',
};

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path={ROUTES.HOME} element={<Home />} />
        <Route path={ROUTES.ABOUT} element={<About />} />
        <Route path={ROUTES.PRODUCT} element={<Product />} />
      </Routes>
    </Router>
  );
};

解説

• Routesインターフェース: アプリ全体のルートを型で定義。
• ROUTES定数: ルートパスを中央で管理。

このアプローチにより、ルートの変更が容易になります。

ナビゲーションの型付け

動的にページ遷移を行う際にも、型を使って安全性を確保することができます。

例: useNavigateを使用したナビゲーション

import { useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();

  const goToProduct = (id: string) => {
    navigate(`/product/${id}`);
  };

  return (
    <div>
      <button onClick={() => goToProduct('123')}>Go to Product 123</button>
    </div>
  );
};

解説

• useNavigate: プログラム的にページ遷移を行うためのフック。
• goToProduct関数: 型付きの動的ルートを生成。

この例では、idが文字列であることを保証することで、安全なナビゲーションを実現しています。

---

React RouterをTypeScriptと組み合わせることで、基本的なルーティングから動的なルーティングまで、型安全性を持たせた堅牢なコードを記述できます。型安全なルート定義やナビゲーションを活用することで、保守性と開発効率が向上します。