如何在 Remix 中为未找到的页面设置自定义标题？答案

【问题标题】：How to set custom title for not found pages in Remix?如何在 Remix 中为未找到的页面设置自定义标题？
【发布时间】：2022-11-24 10:23:49
【问题描述】：

我正在 Remix 应用程序上设置我的 404 页面，但我正在努力研究如何为此类页面设置 <title> 元标记。

在我的root.tsx 中，我有一个MetaFunction 和一个CatchBoundary：

export const meta: MetaFunction = () => {
  return {
    charset: "utf-8",
    title: "New Remix App",
    viewport: "width=device-width,initial-scale=1",
  };
};

export function CatchBoundary() {
  const caught = useCatch();

  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <div>
          <h1>Caught</h1>
          <p>Status: {caught.status}</p>
          <pre>
            <code>{JSON.stringify(caught.data, null, 2)}</code>
          </pre>
        </div>
      </body>
    </html>
  );
}

我尝试使用 MetaFunction 的 data 参数，但不能保证没有 data 意味着它是未找到的响应捕获。

我浏览了几页寻找答案，包括：

这是存储库：

https://github.com/oncet/blog

【问题讨论】：

标签： javascript reactjs remix.run

【解决方案1】：

您可以直接在 CatchBoundary() 的 return 中使用标签 <title>，如下所示：

export function CatchBoundary() {
  const caught = useCatch();

  return (
    <html lang="en">
      <head>
        <title>Oops! Something went wrong!</title>
        <Meta />
        <Links />
      </head>
      <body>
        <div>
          <h1>Caught</h1>
          <p>Status: {caught.status}</p>
          <pre>
            <code>{JSON.stringify(caught.data, null, 2)}</code>
          </pre>
        </div>
      </body>
    </html>
  );
}

它应该给出类似 this 的内容

【讨论】：