【React】404ページを表示させる方法

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

404ページを表示させる方法

1.404ページを作成する

page404.jsx

import React from 'react'
import { Link } from "react-router-dom"

export const Page404 = () => {
  return (
    <>
      <h1>404 NOT FOUND</h1>
      <p>お探しのページが見つかりませんでした。</p>
      <Link to="/">Topに戻る</Link>
    </>
  )
}

2.ルーターの設定をする

Route.jsx

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Page404 } from '../components/Page404'
import { SignIn } from "../components/SignIn"
import { SignUp } from "../components/SignUp"


export const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="sign_in" element={<SignIn />} />
        <Route path="sign_up" element={<SignUp />} />
        <Route path="*" element={<Page404 />} />
      </Routes>
    </BrowserRouter>
  )
}

注. react-router-domv6で記述しています。