React RouterでのNot Foundエラーの処理

アプリケーションを作成する際には、その後の使用過程で発生する様々なエラーへの対応にも注意を払う必要があります。 このレッスンでは、'Not Found' エラーの扱い方を学びます。 このエラーは、例えばユーザーが存在しないページへのリンクをクリックした場合などに発生する可能性があります。

まず、前のレッスンで作成したアプリケーションを開き、コンポーネント Root のマークアップを置き換えましょう。 これで、アプリケーション起動時には2つの商品のリストが表示されるようになります：

routes/root.jsxfunction Root() {
  return (
    <nav>
      <a href={`/products/1`}>Product1</a>
      <a href={`/products/2`}>Product2</a>
    </nav>
  );
}

export default Root;

index.css に少しスタイルを追加しましょう：

index.cssbody {
  font-size: 18px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: blue;
}

それでは、リンクをクリックしてみてください。 商品ページのレイアウトがまだないため、リンクをクリックすると '404 Not Found' エラー画面が表示され、 React Routerがデフォルトで表示しているものよりも、もっと美しく面白いものを自分で考えられたかもしれないとたしなめられることでしょう。

では、404エラーが発生した場合に表示される独自のページを作成しましょう。 そのために、src フォルダ内にファイル error-page-404.jsx を作成します。

Reactコンポーネント ErrorPage404 内で、フック useRouteError を使用してエラーを捕捉し、コンソールに出力します：

error-page-404.jsximport { useRouteError } from 'react-router-dom';

function ErrorPage404() {
  const error = useRouteError();
  console.error(error);

}

export default ErrorPage404;

次に、コンポーネント ErrorPage404 のマークアップで、エラーを通知するいくつかの見出しを表示し、 オブジェクト error のプロパティ statusText と data を表示します （error オブジェクトとそのプロパティは、コンソールを開いてアプリケーション内のリンクをクリックし始めても確認できます）。

error-page-404.jsxreturn (
  <div>
    <h1>Hi! It is an Error Page</h1>
    <h2>404 Not Found Error</h2>
    <p>
      <i>{error.statusText}</i>
    </p>
    <p>
      <i>{error.data}</i>
    </p>
  </div>
);

必ず、ファイル main.jsx を開き、ErrorPage404 のインポート行を追加するのを忘れないでください：

main.jsximport ErrorPage404 from './error-page-404';

また、Router オブジェクトにプロパティ errorElement を追加してください。 この要素は、このルートでエラーが発生したときに表示されます。 エラー要素の値は、私たちのコンポーネント ErrorPage404 になります：

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
  },
]);