2022最新!React Routerで404ページを作る方法

2022年4月6日水曜日

react

t f B! P L

React Routerで、pathで定義したどのルートにもマッチしなかった時に、404ページを表示する方法です。

404ページを表示する

React Routerで404ページを表示する設定は簡単で、Routeの最後に path="*" としたタグを追加し、element に404ページに表示したいコンテンツを設定する。

 <Routes>
   <Route path="/user" element={<User />} />
   <Route path="/about" element={<About />} />
   <Route path="*" element={<div>404 ページが見つかりません。</div>} />
 </Routes>

404時にコンポーネントを表示する

上の例では、element に直接 HTMLを記述しているが、もちろんコンポーネントも表示可能である。

まず、404用のコンポーネントを用意する。

import React from 'react';

/**
 * 受信
 */
function Error404() {

  return (
    <div>
      <h2>404</h2>
      <p>ページが見つかりません。</p>
    </div>
  );
}

export default Error404;

そして、404用のRouteに、上で作成した Error404を設定する。

 <Routes>
   <Route path="/user" element={<User />} />
   <Route path="/about" element={<About />} />
   <Route path="*" element={<Error404 />} />
 </Routes>
スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ