Reactでエラー画面に遷移させる方法

Reactでエラー画面に遷移させる方法

Reactでエラー画面に遷移させる方法を紹介します。
以下の例では、エラーページのルーティングをreact-router-domを使って実装します。

まず、react-router-domとその型定義をインストールします。

npm install react-router-dom
npm install @types/react-router-dom

yarn add react-router-dom
yarn add @types/react-router-dom

1. エラーページのコンポーネントを作成する

※このやり方はエラーページのコンポーネントを使い回す(メッセージ以外、デザインが一緒)場合の方法です。

src/pages/ErrorPage.tsx

import React from 'react';

interface ErrorPageProps {
  statusCode: number;
}

const ErrorPage: React.FC<ErrorPageProps> = ({ statusCode }) => {
  let message = '';

  switch (statusCode) {
    case 401:
      message = '認証エラー: このページにアクセスする権限がありません。';
      break;
    case 403:
      message = '禁止エラー: このページへのアクセスは許可されていません。';
      break;
    case 404:
      message = 'ページが見つかりません。';
      break;
    case 500:
      message = 'サーバーエラーが発生しました。';
      break;
    case 503:
      message = 'サービスが利用できません。';
      break;
    default:
      message = 'エラーが発生しました。';
      break;
  }

  return (
    <div>
      <h1>エラー {statusCode}</h1>
      <p>{message}</p>
    </div>
  );
};

export default ErrorPage;

2. ルーティングを設定する

src/App.tsx

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import ErrorPage from './pages/ErrorPage';

const App: React.FC = () => {
  return (
    <Router>
      <Switch>
        {/* その他のルート */}
        
        {/* エラーページのルート */}
        <Route path="/error/:statusCode" render={({ match }) => {
          const statusCode = Number(match.params.statusCode);
          return <ErrorPage statusCode={statusCode} />;
        }} />

        {/* 404ページ 上記のいずれにも当てはまらない場合 */}
        <Route path="*">
          <Redirect to="/error/404" />
        </Route>
      </Switch>
    </Router>
  );
};

export default App;

3. エラーページにリダイレクトする

例えば、サーバーからのエラー応答を受け取ったときにエラーページにリダイレクトするには、以下のようにします。

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

const FetchDataComponent: React.FC = () => {
  const history = useHistory();

  useEffect(() => {
    // データ取得処理（例）
    fetch('/api/data')
      .then(response => {
        if (!response.ok) {
          // ステータスコードに基づいてエラーページにリダイレクト
          history.push(/error/${response.status});
        }
        return response.json();
      })
      .catch(() => {
        history.push('/error/500');
      });
  }, [history]);

  return <div>データ取得中...</div>;
};

export default FetchDataComponent;

この方法で、特定のエラーコードに応じたエラーページに遷移できます。