客製 Remix 的 Error 404 頁面

2024 年 11 月 22 日

根據官方文件，遇到 Error 404 的狀況主要有兩類：

輸入的 URL 沒有對應的路由
Loader 沒有回傳應該回傳的資料

當面臨第一種狀況時，Remix 會以預設 404 頁面自動應對，所以基本上不需要額外添加任何程式碼或設定。但為了良好的網站體驗還是會想辦法客製化這個頁面，因此後面將介紹兩種設置 404 錯誤頁面的方式。

使用 $ 匹配不存在的路由

如果你的網站不特別複雜，使用 $ 應該是最簡便的方式。在 Remix 的路由概念中 $ 等於動態路由參數，因此我們可以利用這點來匹配所有不存在的路由，依照你的路由方式加入 $.tsx 或者是 $/index.tsx。程式碼結構就會如下圖 (以資料夾路由為例)：


  .
  ├── app
  │   ├── main.css
  │   ├── root.tsx
  │   └── routes
  │       ├── $
  │       │   └── index.tsx
  │       └── _index
  │           └── index.tsx

使用 Root Error Boundary

Error Boundary 為應用程式發生錯誤時的處理機制，當組件或局部發生錯誤而沒有定義專屬的 Error Boundary，Root Error Boundary 就成為整個應用程式的最後一道處理防線，所以我們就可利用這點來處理 404 錯誤。不過，因為傳入的錯誤類型不僅限於 404，因此最好增加適當邏輯來處理錯誤。添加 Root Error Boundary 只需要在 root.tsx 內加上即可。


import { useRouteError } from '@remix-run/react'

export const ErrorBoundary = () => {
  const error = useRouteError()
  return (
    <html><body>{error.status}</body></html>
  )
}

const App = () => {
  return ({/* 你的應用 Root */})
}

export default App

以上就是兩種設定 404 頁面的方式，更多的細節能在 Remix 官方文件裡找到，感謝閱讀！