TypeScriptのSPAで存在しないURLの場合に表示される404ページをカスタマイズする方法

目次

App.tsx

SPAとして、App.tsxを作成します。
以下のサンプルは、「/hoge」のページのみを用意していますが、こちらは任意でカスタマイズしてください。

Error404Pageは後述しますので、そちらのパスに修正してください。

URLの記載は順番が重要なので、注意してください。
必ず、404のページは最後に記載してください。

import React, { VFC } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

import Error404Page from "~/Error404Page";

const App: VFC = () => {
  return (
    <Router>
      <Routes>
        {/* URL */}
        <Route path="/hoge" element={<Hoge />} />

        {/* 404のページ */}
        <Route path="*" element={<Error404Page />} />
      </Routes>
    </Router>
  );
};

export default App;

Error404Page

コンポーネント部分のディレクトリ構造は以下とします。

~/Error404Page
       ┗ index.tsx

Error404Pageには以下を記載します。
デザインなど、任意で修正してください。

import React from "react";

const Error404Page = () => {
  return <div>404</div>;
};

export default Error404Page;

遷移方法

SPAでURLの定義を行なっていない任意のURLにアクセスすることで、404のエラーページが表示されます。