時間過的好快 轉眼就第22天了，究竟能不能撐到最後一天呢XDD
最近不幸確診了，整個頭重腳輕中，文章品質可能會下降
補完的部分要等到康復後再慢慢做完善～還請諸看倌們多包涵啦

預設錯誤頁面 error page

所謂錯誤的頁面也就是任何路徑沒有搭配指定組件的頁面，也就是除了渲染特定組件外的所有頁面
回到 App.js 引入 NoFound component (預設錯誤頁面上要顯示什麼資訊的組件)

import NoFound from './NoFound.js'

照慣例建立出 NoFound.js 內容隨意

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

export default function NoFound() {
  return (
    <div>
      <nav>
        <Link className='mx-20' to='/'>
          Home
        </Link>
        <Link className='mx-20' to='/contact'>
          Contact
        </Link>
      </nav>
      <h1>Oops!Something went wrong</h1>
    </div>
  )
}

並在 <Routes> 內增加這行，path='*'的意思就是符合所有路徑

<Route path='*' element={<NoFound />} />

這時候在網址列中隨意亂打，就可以發現被 route 到 NoFound 組件囉

參考資料

https://stackoverflow.com/questions/67050966/how-to-build-a-404-page-with-react-router-dom-v6