Reactで404ページを用意する方法を学ぶ

学んだこと

Route にて設定していないページはどうすべきか

• 404 ページを用意する。
• 404 の意味はページが存在しないという意味
  • そのため、存在しないページを開こうとしているということをユーザに知らせる必要がある。

Route.jsx

• 新たに 404 用のルート設定を行う。
• Route path="*"で、ルートの設定に該当しないものを表す。
  • ルートの設定に該当しない URL の場合は、404 ページを表示するようにする。

import { Switch, Route } from 'react-router-dom';

import { Page2 } from '../Page2';
import { Home } from '../Home';
import { page1Routes } from './Page1Routes';
import { page2Routes } from './Page2Routes';
import { Page404 } from '../Page404';

export const Router = () => {
  return (
    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route
        path="/page1"
        render={({ match: { url } }) => (
          <Switch>
            {page1Routes.map((route) => (
              <Route
                key={route.path}
                exact={route.exact}
                path={`${url}${route.path}`}
              >
                {route.children}
              </Route>
            ))}
          </Switch>
        )}
      ></Route>
      <Route
        path="/page2"
        render={({ match: { url } }) => (
          <Switch>
            {page2Routes.map((route) => (
              <Route
                key={route.path}
                exact={route.exact}
                path={`${url}${route.path}`}
              >
                {route.children}
              </Route>
            ))}
          </Switch>
        )}
      ></Route>
      <Route path="*">
        <Page404 />
      </Route>
    </Switch>
  );
};

Page404.jsx

• 404 ページ専用のコンポーネント
• 404 ページでは、ページが見つからないとユーザに知らせ、TOP ページに戻れるようにした。

import { Link } from 'react-router-dom';
export const Page404 = () => {
  return (
    <div>
      <h1>ページが見つかりませんでした</h1>
      <Link to="/">TOPに戻る</Link>
    </div>
  );
};