目次
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のエラーページが表示されます。