【React】学習ロードマップ take6 ~404ページ作成方法~

404ページ React

概要

前章では、Reactでページ遷移を実装しました。

ページ遷移を実装する際には、404ページもマストで作りましょう。

不明、または削除されたページにアクセスしようとした場合には、例外なく404ページに遷移されるようにしていきます。

前章は以下リンクです。

準備

実際にローカルで動くプロジェクトを作成します。

任意のディレクトリでこちらのコマンドを順番に叩いてください。

// React の開発に必要な基本的な設定を含むプロジェクト構造を作成
$ npx create-react-app hoghogeApp

// 作成したプロジェクトに移動する
$ cd hoghogeApp

// 開発サーバーを起動し、ブラウザで React アプリケーションを開く
$ npm start

または、下記リンクからSandboxを開いて簡易的に動作環境を準備します。

https://codesandbox.io/p/sandbox/react-new

実装

実際にこのようにコードを実装します。

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

元記事

コメント

タイトルとURLをコピーしました