ルーティングの実装

React Router は、React アプリケーションでルーティング（ページ遷移）を行うためのライブラリです。 ※このページでは、v7 におけるルーティングの基本を紹介します。

インストール

npm install react-router-dom@latest

ルートの定義（createBrowserRouter）

createBrowserRouter を用いてルートを定義します。

// main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import {
  RouterProvider,
  createBrowserRouter,
} from "react-router-dom";

import Root from "./routes/Root";
import Home from "./routes/Home";
import About from "./routes/About";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      { index: true, element: <Home /> },
      { path: "about", element: <About /> },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

レイアウトコンポーネント（Root）

// routes/Root.tsx
import { Outlet, Link } from "react-router-dom";

export default function Root() {
  return (

<div>

<nav>
        <Link to="/">ホーム</Link> | <Link to="/about">アバウト</Link>
      </nav>
      <hr />
      <Outlet />
    </div>
  );
}

ページコンポーネント

// routes/Home.tsx
export default function Home() {
  return 
<h2>ホームページ</h2>;
}

// routes/About.tsx
export default function About() {
  return 
<h2>アバウトページ</h2>;
}

ネストされたルーティング

ルート配列で階層的にルーティング構造を定義でき、<Outlet /> を使って子要素を挿入します。

パスパラメータの取得

// routes/User.tsx
import { useParams } from "react-router-dom";

export default function User() {
  const { id } = useParams();
  return 
<div>ユーザーID: {id}</div>;
}

プログラムによる遷移

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

export default function GoAboutButton() {
  const navigate = useNavigate();
  return <button onClick={() => navigate("/about")}>Aboutへ</button>;
}

Not Found ページの設定

{
  path: "*",
  element: 
<h2>ページが見つかりません</h2>,
}