在開發 React 應用程式時，我們會利用 react-router-dom 來做路由控制，不過，當使用者輸入一個不存在的路徑時，預設情況下的頁面不會顯示任何內容，可能讓使用者不明白目前的狀況。
因此，通常會設置一個 404 NotFound 頁面，提醒使用者該路徑不存在，並提供返回首頁或其他導覽的方式。

為什麼需要 404 NotFound 頁面

• 使用者輸入錯誤的網址
• 舊版的連結（例如文章被刪掉）
• 其他網站或搜尋引擎還保留過期的連結

和伺服器端 404 的不同

在 React 這類的單頁應用程式 ( SPA, Single Page Application ) 中，所有路由請求通常都會先被導向 index.html，再由前端的 React Router 來決定要呈現哪個頁面。
因此，前端需要模擬一個「兜底路由」，來處理使用者輸入不存在路徑的情況。
和傳統伺服器端的 404 不同：

• 前端 404：由 React Router 在客戶端渲染，不會重新向伺服器發送請求
• 伺服器端 404：由後端直接回應「找不到頁面」

範例

1. 建立 NotFound 頁面元件

這個元件會在使用者輸入不存在的網址時顯示
NotFound.js

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

export default function NotFound(){
    return (
        <div>
            <h2>找不到頁面</h2>
            <p>回到<Link to ="/">首頁</Link></p>
        </div>
    )
}

2. 在 App.js 配置兜底路由

App.js

import NotFound from "./NotFound";

<Route path="*" element={<NotFound />}></Route>

• path="*"：代表「配對所有未定義的路由」
• 必須放在 Routes 的最後，確保前面的路由優先配對

範例結果：

• / → 正常進入首頁
• /blogs/1、/blogs/2、/blogs/3 → 進入 BlogDetails
• /不存在的路徑 → 進入到 NotFound 頁面

瀏覽器執行畫面

處理 404 NotFound 頁面流程：

1. 建立 NotFound 元件
2. 在 App.js 設定 path="*" 做兜底
3. 提供回首頁或導覽等方式