React 入門

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

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

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

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

src/components/NotFoundPage.tsximport React from 'react'

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

export default NotFoundPage

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

src/components/NotFoundPage.tsximport React from 'react'

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

export default NotFoundPage

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

import { Route, Routes } 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 = (
  <Routes>
    <Route path="/" element={<CommentListPage />} />
    <Route path="/show/:commentId" element={<CommentShowPage />} />
    <Route path="/edit/:commentId" element={<CommentEditPage />} />
    <Route path="*" element={<NotFoundPage />} />
  </Routes>
);

export default routes;

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

目次に戻る