React Router: No Not Found Route ?

2024-04-10

React-Routerで404ページを表示する

このライブラリを使うと、URLと画面表示を対応させることができ、ユーザーがブラウザのURLを変更したときに、それに応じて表示される画面を切り替えることができます。

しかし、ユーザーが誤ったURLを入力したり、存在しないページにアクセスしようとした場合、何も表示されない状態になる可能性があります。

そこで、404ページ を表示することで、ユーザーが現在アクセスしているページが存在しないことを伝えることができます。

404ページを表示する方法

React-Routerで404ページを表示するには、以下の方法があります。

Switch コンポーネントを使う

Switch コンポーネントは、複数の Route コンポーネントをまとめて管理するためのコンポーネントです。

Route コンポーネントは、URLと画面表示を対応させるためのコンポーネントです。

Switch コンポーネントの中で、すべての Route コンポーネントにマッチしなかった場合に、404ページを表示するコンポーネントを最後に記述します。

import { Switch, Route } from 'react-router-dom';

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route component={NotFound} />
    </Switch>
  );
};

const NotFound = () => {
  return (
    <div>
      <h1>404ページ</h1>
      <p>お探しのページは見つかりませんでした。</p>
    </div>
  );
};

上記のコードでは、NotFound コンポーネントが404ページとして表示されます。

Redirect コンポーネントは、ユーザーを別のURLにリダイレクトするためのコンポーネントです。

すべての Route コンポーネントにマッチしなかった場合に、Redirect コンポーネントを使って404ページにリダイレクトすることができます。

import { Switch, Route, Redirect } from 'react-router-dom';

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Redirect to="/404" />
    </Switch>
  );
};

const NotFound = () => {
  return (
    <div>
      <h1>404ページ</h1>
      <p>お探しのページは見つかりませんでした。</p>
    </div>
  );
};

上記のコードでは、すべての Route コンポーネントにマッチしなかった場合、/404 URLにリダイレクトされます。

React-Routerで404ページを表示するには、Switch コンポーネントまたは Redirect コンポーネントを使うことができます。

404ページは、ユーザーにとって分かりやすく、親切なページであることが重要です。

404ページには、以下のような情報を記載すると良いでしょう。

404エラーが発生したことを伝えるメッセージ
お探しのページが存在しない理由
ホームページへのリンク
サイトマップへのリンク

404ページをうまく活用することで、ユーザーの利便性を向上させることができます。

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

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Redirect to="/404" />
    </Switch>
  );
};

const Home = () => {
  return (
    <div>
      <h1>ホーム</h1>
      <p>これはホーム画面です。</p>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>会社概要</h1>
      <p>これは会社概要ページです。</p>
    </div>
  );
};

const NotFound = () => {
  return (
    <div>
      <h1>404ページ</h1>
      <p>お探しのページは見つかりませんでした。</p>
      <a href="/">ホームへ戻る</a>
    </div>
  );
};

export default App;

NotFound コンポーネントでは、404エラーが発生したことを伝えるメッセージと、ホームページへのリンクを表示しています。

import React from 'react';
import { Switch, Route } from 'react-router-dom';

const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route component={NotFound} />
    </Switch>
  );
};

const Home = () => {
  return (
    <div>
      <h1>ホーム</h1>
      <p>これはホーム画面です。</p>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>会社概要</h1>
      <p>これは会社概要ページです.</p>
    </div>
  );
};

const NotFound = () => {
  return (
    <div>
      <h1>404ページ</h1>
      <p>お探しのページは見つかりませんでした.</p>
      <a href="/">ホームへ戻る</a>
    </div>
  );
};

export default App;

上記のコードは、サンプルコード1と同様に、React-Routerを使って404ページを表示するサンプルコードです。

上記のサンプルコードを参考に、React-Routerで404ページを表示してみてください。

React-Routerで404ページを表示する他の方法

NotFound コンポーネントをデフォルトのルートとして設定する

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <Route component={NotFound} />
    </BrowserRouter>
  );
};

const NotFound = () => {
  return (
    <div>
      <h1>404ページ</h1>
      <p>お探しのページは見つかりませんでした.</p>
      <a href="/">ホームへ戻る</a>
    </div>
  );
};

export default App;

この方法を使うと、すべての URL にマッチしなかった場合に、NotFound コンポーネントが表示されます。

ErrorBoundary コンポーネントを使う

import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';

const App = () => {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
};

const MyComponent = () => {
  // エラーが発生するコード
};

export default App;