React Router v7で学ぶルーティングの基本とエラーハンドリング

はじめに

本記事では、React Router v7のデータモードを使った、モダンなルーティング設定方法を紹介します。
このモードは、従来のルーティングとは異なり、コンポーネントのレンダリング前にデータを取得できるため、パフォーマンスの高いアプリケーションを構築する上で非常に有効です。
初期の構築では以下の記事で紹介しているので、こちらを参考にしてください。

やること

1. ページコンポーネントの準備
2. createBrowserRouterを使ったルーティング設定
3. RouterProviderを使ったアプリケーションへのルーティング適用
4. 動作確認とエラーハンドリングのテスト

ページコンポーネントの準備

今回は確認用のため、シンプルなコンポーネントを用意します。
src/pages/Login/index.tsx

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

const LoginPage = () => {
  return (
    <>
      <div>
        <h1>ログインページ</h1>
        <Link to="/">ホーム</Link>
      </div>
    </>
  );
};

export default LoginPage;

src/pages/Top/index.tsx

const TopPage = () => {
  return (
    <>
      <div>
        <h1>トップページ</h1>
      </div>
    </>
  );
};

export default TopPage;

src/pages/ErrorPage.tsx

const ErrorPage = () => {
  return (
    <>
      <div>
        <h1>エラーページ</h1>
      </div>
    </>
  );
};

export default ErrorPage;

src/pages/NotFoundPage.tsx

const NotFoundPage = () => {
  return (
    <>
      <div>
        <h1>404 - ページが見つかりません</h1>
      </div>
    </>
  );
};

export default NotFoundPage;

ルーティングの定義と適用

router.tsxを修正

router.tsxは、アプリケーションのルーティングの設計図です。
createBrowserRouterを使って、どのURLパスがどのコンポーネントに対応するかを定義します。

• Component: App：すべてのページで共通のレイアウト（ヘッダーやフッターなど）を適用したい場合、親ルートにApp.tsxを指定します。
• errorElement：ルーティング中にエラーが発生した場合に表示するページを設定します。

src/router.tsx

import { createBrowserRouter } from "react-router-dom";
import App from "./App.tsx";

// 各ページコンポーネントのインポート
import LoginPage from "./pages/Login";
import TopPage from "./pages/Top";
import ErrorPage from "./pages/ErrorPage";
import NotFoundPage from "./pages/NotFoundPage";

// ルーティング定義をオブジェクトの配列として作成
export const router = createBrowserRouter([
  {
    path: "/",
    Component: App,
    errorElement: <ErrorPage />,
    children: [
      { index: true, Component: TopPage, id: "top" },
      { path: "login", Component: LoginPage, id: "login" },
      { path: "*", Component: NotFoundPage },
    ],
  },
]);

main.tsxを修正

main.tsxは、アプリケーションのエントリーポイントです。

ここでは、createBrowserRouterで作成したrouterを、RouterProviderを使ってアプリケーションに適用し、ReactコンポーネントをDOMにマウントします。
src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./router";

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

App.tsxを修正

App.tsxは、すべてのページの共通レイアウトを定義するコンポーネントです。

Outletコンポーネントを使うことで、ルーティングでマッチした子コンポーネント（TopPageやLoginPageなど）を、App.tsxの内部に表示できます。
src/App.tsx

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

function App() {
  return (
    <>
      <div>
        <Outlet />
      </div>
    </>
  );
}

export default App;

画面確認

これでルーティングのセットアップが完了しました。
実際にブラウザで以下のURLにアクセスして確認しましょう。
http://localhost:5173 → トップページが表示されます。
http://localhost:5173/login → ログインページが表示されます。
http://localhost:5173/aaa → 404 - ページが見つかりませんが表示されます。

エラーページのテストは、TopPageに一時的に以下のコードを追加して確認できます。
確認用の一時的なものなので、確認後削除してください。

const TopPage = () => {
  // エラー確認用のコード
  throw new Error("エラーページのテスト");
  return (
    <>
      <div>
        <h1>トップページ</h1>
      </div>
    </>
  );
};

export default TopPage;

おわりに

本記事では、React Router v7のルーティング設定方法をまとめました。
他にもReact周りの記事を出していますので、気になる記事があれば読んでみてください。