React RouterでのNot Foundエラーの処理
アプリケーションを作成する際には、その後の使用過程で発生する様々なエラーへの対応にも注意を払う必要があります。
このレッスンでは、'Not Found' エラーの扱い方を学びます。
このエラーは、例えばユーザーが存在しないページへのリンクをクリックした場合などに発生する可能性があります。
まず、前のレッスンで作成したアプリケーションを開き、コンポーネント Root のマークアップを置き換えましょう。
これで、アプリケーション起動時には2つの商品のリストが表示されるようになります：
function Root() {
return (
<nav>
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
</nav>
);
}
export default Root;
index.css に少しスタイルを追加しましょう：
body {
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 を使用してエラーを捕捉し、コンソールに出力します：
import { useRouteError } from 'react-router-dom';
function ErrorPage404() {
const error = useRouteError();
console.error(error);
}
export default ErrorPage404;
次に、コンポーネント ErrorPage404 のマークアップで、エラーを通知するいくつかの見出しを表示し、
オブジェクト error のプロパティ statusText と data を表示します
（error オブジェクトとそのプロパティは、コンソールを開いてアプリケーション内のリンクをクリックし始めても確認できます）。
return (
<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 のインポート行を追加するのを忘れないでください：
import ErrorPage404 from './error-page-404';
また、Router オブジェクトにプロパティ errorElement を追加してください。
この要素は、このルートでエラーが発生したときに表示されます。
エラー要素の値は、私たちのコンポーネント ErrorPage404 になります：
const router = createBrowserRouter([
{
path: '/',
element: <Root />,
errorElement: <ErrorPage404 />,
},
]);
前回のレッスンの課題で作成したアプリケーションを使ってください。
ホームページに、レッスンで示されているように、いくつかのリンクからなるリストを追加してください。
リンクの href の値を /students/1 と /students/2 に、
リンクのテキストをそれぞれ 'Student1' と 'Student2' にしてください。
リンクをクリックすると、React Routerがデフォルトで表示するエラー画面が表示されることを確認してください。
さて、独自の404エラーページを作成し、好きなものを表示してください。 レッスンで示されているように接続してください。そして、リンクをクリックしたときにそのページに確実に移動することを確認してください。
