React 入門

JavaScript コメント掲示板アプリの開発

404 Not Found エラーページの変更

ブラウザのアドレスバーに不正な URL を入力した場合には HTTP の 404 ステータスコードが返され，エラーページが表示されます．例えば /abc/ のような URL に対してリクエストすると，次のページが表示されます．

このエラーページを変更する方法を最後に示しておきます．まず，src/componenst/NotFoundPage.js ファイルを作成して，rafce で雛形を作成します．

src/components/NotFoundPage.js
import React from 'react'

const NotFoundPage = () => {
  return (
    <div>NotFoundPage</div>
  )
}

export default NotFoundPage

作成した雛形を適当に変更して表示したいエラーページを作成します．

src/components/NotFoundPage.js
import React from 'react'

const NotFoundPage = () => {
  return (
    <div className="container">
      <h1>404 Not Found</h1>
      <p>指定したページは見つかりませんでした</p>
    </div>
  )
}

export default NotFoundPage

エラーページのためのルートを定義します．すでにあるルート定義の最後に「すべてのパス」を意味する "*" を指定して，NotFoundPage コンポーネントを指定します．つまり，上で定義されたルートに一致しなかった場合はすべて NotFoundPage コンポーネントが表示されることになります．

import { Route, createBrowserRouter, createRoutesFromElements } from 'react-router-dom';
import CommentListPage from '../components/CommentListPage';
import CommentShowPage from '../components/CommentShowPage';
import CommentEditPage from '../components/CommentEditPage';
import NotFoundPage from '../components/NotFoundPage';

const routes = createBrowserRouter(
  createRoutesFromElements(
    <Route>
      <Route path="/" element={<CommentListPage />} />
      <Route path="/show/:commentId" element={<CommentShowPage />} />
      <Route path="/edit/:commentId" element={<CommentEditPage />} />
      <Route path="*" element={<NotFoundPage />} />
    </Route>
  )
);

export default routes;

不正なアドレスを指定した場合に次のようなページが表示されることが確認できました．

目次に戻る