404ページ
どの Route にも当たらないとき
対応表に無い URL を開かれると、React Router はどれも選びません。画面には共通のナビだけが残り、中身が空っぽになります。エラーも出ないので、利用者からはアプリが壊れたようにしか見えません。
これは珍しいことではありません。古いお知らせのリンク、打ち間違えた URL、消した商品のブックマーク。どれも普通に起きます。だから受け皿を用意します。
アスタリスクのルート
path にアスタリスクを書くと、他のどれにも当たらなかったとき用の行になります。
TypeScript (JSX)
<Routes>
<Route path="/" element={<Home />} />
<Route path="/items" element={<ItemList />} />
<Route path="*" element={<NotFound />} />
</Routes>アスタリスクはどんな URL にも当たります。それでも /items を開いたときに NotFound が出ないのは、Routes が一番よく合う1つを選ぶからです。並べる順番で決まるわけではないので、読みやすい位置に置いて構いません。慣習として最後に書きます。
受け皿には出口を置く
404 のページで一番大事なのは、謝る文ではなく次にどこへ行けるかです。
TypeScript (JSX)
function NotFound() {
return (
<div className="not-found">
<h1>ページが見つかりませんでした</h1>
<p>URL が変わったか、商品が取り下げられたのかもしれません。</p>
<Link className="to-home" to="/">トップへ戻る</Link>
</div>
);
}行き止まりにしないことが要点です。ここでブラウザの戻るボタンしか出口が無いと、そのまま離脱されます。
なお、これはあくまで画面の話です。サーバーが返す 404 という応答とは別のもので、URL の見た目も変わりません。SPA では、無い場所を出すのもアプリの仕事になります。
演習
迷子の受け皿を作り、トップへの出口を付けます。