Reactの応用技術：React Router編

Reactで複雑なアプリケーションを作成する際に、ユーザーが異なるページに移動できるようにするためのツールがReact Routerです。React Routerは、シングルページアプリケーション（SPA）のルーティングを簡単に管理するためのライブラリで、特に複雑なページ遷移やダイナミックなURL管理に役立ちます。また、React RouterとHooksを組み合わせることで、状態管理や副作用の処理がさらに柔軟になります。本記事では、React Routerの基本とHooksを使った応用的なルーティング技術について解説します。

1. React Routerの基本

React Routerは、SPAでページ遷移を可能にするためのライブラリです。通常、Webアプリケーションでは複数のHTMLファイルを使ってページを切り替えますが、SPAではページ全体を再読み込みすることなく、必要なコンポーネントだけをレンダリングします。

基本的なセットアップ

まずは、React Routerをインストールし、基本的なルーティングを設定してみましょう。

npm install react-router-dom

インストール後、BrowserRouter、Route、Linkを使ってルーティングを設定します。

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

function Home() {
  return <h2>ホームページ</h2>;
}

function About() {
  return <h2>Aboutページ</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">ホーム</Link>
        <Link to="/about">About</Link>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

コードのポイント

BrowserRouter: Reactアプリ全体をラップし、ルーティング機能を提供します。
Route: 特定のURLパスに対応するコンポーネントを表示します。
Link: クリックでURLを変更し、指定されたパスに遷移します。
Switch: 複数のRouteを管理し、最初に一致するルートをレンダリングします。

2. Hooksを使ったReact Routerの活用

React Routerは、通常のルーティング機能に加えて、Hooksを使ってルートに関する情報を取得したり、プログラム的にルートを操作したりすることができます。

`useHistory`フックでルーティング操作

useHistoryフックは、プログラムでルートを遷移させたい場合に使用します。例えば、フォーム送信後に特定のページにリダイレクトする場合などに便利です。

import React from "react";
import { useHistory } from "react-router-dom";

function Login() {
  const history = useHistory();

  function handleLogin() {
    // ログイン処理が成功した場合、ホームページへリダイレクト
    history.push("/");
  }

  return (
    <div>
      <h2>ログインページ</h2>
      <button onClick={handleLogin}>ログイン</button>
    </div>
  );
}

export default Login;

`useParams`フックで動的なパラメータを取得

*useParams*フックは、URLの動的な部分を取得するために使用されます。例えば、ユーザーIDに基づいてプロフィールページを表示する場合に活用します。

import React from "react";
import { useParams } from "react-router-dom";

function UserProfile() {
  const { userId } = useParams();

  return <h2>ユーザーID: {userId}</h2>;
}

export default UserProfile;

useParamsを使うことで、URLパラメータ（/users/:userIdなど）から動的なデータを取得し、それに基づいた処理が行えます。

`useLocation`フックで現在のURL情報を取得

*useLocation*フックは、現在のURLに関する詳細な情報（パス、検索クエリなど）を取得するために使用します。

import React from "react";
import { useLocation } from "react-router-dom";

function QueryParams() {
  const location = useLocation();

  return (
    <div>
      <h2>現在のURLパス: {location.pathname}</h2>
      <p>クエリ: {location.search}</p>
    </div>
  );
}

export default QueryParams;

useLocationを使えば、ページの検索クエリ（例：?search=term）を取得して処理に利用できます。

3. Protected Route（認証付きルート）

Webアプリケーションでは、特定のルートにアクセスできるユーザーを制限する場合があります。これをProtected Route（保護されたルート）として実装し、認証されていないユーザーがログインページへリダイレクトされるように設定します。

import React from "react";
import { Route, Redirect } from "react-router-dom";

// ログイン済みかどうかをチェックする関数
function isAuthenticated() {
  return localStorage.getItem("authToken") !== null;
}

function ProtectedRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated() ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
}

export default ProtectedRoute;

ProtectedRouteは、認証されているかどうかをチェックし、認証されていない場合は/loginページにリダイレクトします。

使用例

<ProtectedRoute path="/dashboard" component={Dashboard} />

上記のように設定すると、/dashboardへのアクセスは認証済みのユーザーに限定され、そうでない場合はログインページにリダイレクトされます。

4. useRouteMatchでネストされたルートを処理

*useRouteMatch*は、ネストされたルートや複数のルートにマッチするかどうかを確認するためのフックです。たとえば、商品カテゴリごとの詳細ページを表示するような場合に役立ちます。

import React from "react";
import { useRouteMatch, Link, Route } from "react-router-dom";

function Categories() {
  const { path, url } = useRouteMatch();

  return (
    <div>
      <h2>カテゴリ</h2>
      <ul>
        <li>
          <Link to={`${url}/electronics`}>エレクトロニクス</Link>
        </li>
        <li>
          <Link to={`${url}/fashion`}>ファッション</Link>
        </li>
      </ul>

      <Route path={`${path}/:categoryName`}>
        <Category />
      </Route>
    </div>
  );
}

function Category() {
  const { categoryName } = useParams();
  return <h3>選択したカテゴリ: {categoryName}</h3>;
}

export default Categories;

useRouteMatchを使うと、現在のルート情報に基づいて動的にURLやパスを作成できます。
商品カテゴリに応じた詳細ページが、ネストされたルートで表示されます。

5. React Router Hooksとパフォーマンス最適化

ルーティングが複雑になると、アプリケーションのパフォーマンスにも影響を与える可能性があります。そこで、React.memoやuseMemoを使って、再レンダリングの回数を最適化する方法も重要です。特定のルートでの状態や処理をキャッシュし、必要なときにだけ再計算することで、アプリケーションの効率を上げることができます。

import React, { useMemo } from "react";
import { useLocation } from "react-router-dom";

function ExpensiveComponent() {
  const location = useLocation();

  const expensiveCalculation = useMemo(() => {
    // コストのかかる計算
    return heavyCalculation(location.pathname);
  }, [location.pathname]);

  return <div>{expensiveCalculation}</div>;
}

useMemoを使って、計算処理が不要な再レンダリングを避けることで、アプリのパフォーマンスを向上させます。

まとめ

React RouterとHooksを組み合わせることで、より柔軟でパワフルなルーティングが可能になります。useHistoryやuseParams、useLocationなどのHooksを活用することで、ページ遷移や動的なURL処理がシンプルに行えるようになります。また、認証付きルートやネストされたルートの管理も簡単に実装でき、リアルなWebアプリケーションを構築するための重要なツールとなります。これらのテクニックを使いこなして、Reactアプリケーションのルーティングをさらに強化していきましょう。

アルアカ - Arcadia Academia