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

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>