找不到 (404) 處理

當在網頁伺服器上找不到文件時，它應該發送 404 狀態碼。這會向機器表明該文件不存在：搜尋引擎不會索引它，CDN 不會快取它等等。如今大多數 SPA 只是將所有內容都以 200 的狀態提供，無論頁面是否存在，但對您而言，今天就結束了！

在兩種主要情況下，Remix 網站應發送 404

URL 不符合應用程式中的任何路由
您的 loader 沒有找到任何資料

第一種情況已由 Remix 處理，您不必自己拋出回應。它知道您的路由，因此它知道是否沒有符合的路由（考慮使用 Splat 路由來處理這種情況）。第二種情況則取決於您，但它真的很容易。

如何發送 404

一旦您知道您沒有使用者正在尋找的內容，您就應該拋出回應。

export async function loader({
  params,
}: LoaderFunctionArgs) {
  const page = await db.page.findOne({
    where: { slug: params.slug },
  });

  if (!page) {
    throw new Response(null, {
      status: 404,
      statusText: "Not Found",
    });
  }

  return json(page);
}

Remix 會捕獲回應，並將您的應用程式傳送到錯誤邊界路徑。它實際上與 Remix 的自動錯誤處理完全相同，但您不會從 useRouteError() 接收到 Error，而是會接收到一個包含您的回應 status、statusText 和提取的 data 的物件。

拋出回應的好處是，您 loader 中的程式碼會停止執行。您其餘的程式碼不必處理頁面是否已定義的可能性（這對於 TypeScript 來說尤其方便）。

拋出也確保如果 loader 不成功，您的路由元件不會呈現。您的路由元件只需考慮「正常路徑」。它們不需要處理待處理狀態、錯誤狀態，或者在這裡的情況下，找不到的狀態。

根錯誤邊界

您可能已在應用程式的根目錄中建立了一個。這將處理所有未在巢狀路由中處理的拋出回應。這是一個範例

export function ErrorBoundary() {
  const error = useRouteError();
  return (
    <html>
      <head>
        <title>Oops!</title>
        <Meta />
        <Links />
      </head>
      <body>
        <h1>
          {isRouteErrorResponse(error)
            ? `${error.status} ${error.statusText}`
            : error instanceof Error
            ? error.message
            : "Unknown Error"}
        </h1>
        <Scripts />
      </body>
    </html>
  );
}