概要
前章では、Reactでページ遷移を実装しました。
ページ遷移を実装する際には、404ページもマストで作りましょう。
不明、または削除されたページにアクセスしようとした場合には、例外なく404ページに遷移されるようにしていきます。
前章は以下リンクです。
準備
実際にローカルで動くプロジェクトを作成します。
任意のディレクトリでこちらのコマンドを順番に叩いてください。
// React の開発に必要な基本的な設定を含むプロジェクト構造を作成
$ npx create-react-app hoghogeApp
// 作成したプロジェクトに移動する
$ cd hoghogeApp
// 開発サーバーを起動し、ブラウザで React アプリケーションを開く
$ npm startまたは、下記リンクからSandboxを開いて簡易的に動作環境を準備します。
https://codesandbox.io/p/sandbox/react-new
codesandbox.io
実装
実際にこのようにコードを実装します。
Router.jsx
-----------------------------------------------
import { Switch, Route, Routes } from "react-router-dom";
import { Home } from "../Home";
import { pageRoutes } from "./PageRoutes";
export const Router = () => {
return (
<Routes>
{pageRoutes.map((route) => (
<Route key={route.path} path={route.path} element={route.element} />
))}
</Routes>
);
};
PageRoutes.jsx
-----------------------------------------------
import { Home } from "../Home";
import { Page1 } from "../Page1";
import { Page404 } from "../Page404";
export const pageRoutes = [
{
path: "/",
exact: true,
element: <Home />,
},
{
path: "/page1",
exact: true,
element: <Page1 />,
},
{
path: "*",
exact: false,
element: <Page404 />,
},
];
Home.jsx
-----------------------------------------------
export const Home = () => {
return (
<div>
<h1>Homeページです</h1>
</div>
);
};
App.js
-----------------------------------------------
import { BrowserRouter, Link, Switch, Route, Routes } from "react-router-dom";
import "./styles.css";
import { Router } from "./router/Router";
export default function App() {
// let { detailId } = useParams();
return (
<BrowserRouter>
<div className="App">
<Link to="/">Home</Link>
<br />
<Link to="/Page1">Page1</Link>
<br />
<Link to="/Page2">Page2</Link>
<br />
</div>
<Router />
</BrowserRouter>
);
}
Page404.jsx
-----------------------------------------------
import { Link } from "react-router-dom";
export const Page404 = () => {
return (
<div>
<h1>ページが見つかりません</h1>
<Link to="/">ホームに戻る</Link>
</div>
);
};
＊Page1,Page2については、Home.jsx同様で簡易的に作成しているため、省略ここでの肝は、PageRoutes.jsxで path: “*”,としてルーティングしていない全てのページが404に遷移するようにしているところです。
PageRoutes.jsx
-----------------------------------------------
・
・
・
{
path: "*",
exact: false,
element: <Page404 />,
},操作(UI)
まずは、Home画面を表示します。
存在しないURLにアクセスしてみます。
https://pp7mjt.csb.app/xxxxxxxに実際にアクセスしてみます。
ページ遷移すると、404として設定しているページが表示されます。
他のURLで試してみても同様です。
この画面に「ホームに戻る」リンクを置いておくと親切かと思います。
まとめ
いかがでしたでしょうか。
404ページの実装方法を紹介しました。ページ遷移を実装する際には、漏れなく作っておきたいページです。
Githubみたいに動的ページにしてみるのも良いかと思います。
ぜひやってみてください！
また良いTipsを見つけたら共有していこうと思います！
他Tips
元記事
コメント