当前位置：文江博客话题详情

remix.run

如何在混音中创建自定义样式的404页

发布于 2025-01-29 14:00:39 字数 213 浏览 4 评论 0 原文

您好，我该如何样式并创建Remix自定义404页。

当识别路径时，我想用自己的内容覆盖当前的404页。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别闹i 2025-02-05 14:00:39

tldr;

创建路由/$。JSX 文件。可选地，您可以在该路线中添加此加载程序，以获取HTTP 404状态代码。

export const loader = () => {
  return json(null, { status: 404 });
};

link to doc

3种类型的观点

您应该在3种类型的上显示自定义UI错误：

之类的意外错误无法读取未定义的（ erryboundary 在 root.tsx 中）
预期错误，例如自定义逻辑 return json（{errors：[{code：“ novaid”，messages：“ user doc doc day}）}）< /code>（ catchboundary in root.tsx ）
404（ splat Route $ .tsx 在 route> routes/utaes> routes/ ）

也可以为每个嵌套路由定义一个errorboundary/catchboundary，如果您认为这会给用户一个更好的UX（例如在Tabs或文件夹中）。

TLDR;

Create a routes/$.jsx file. Optionally you can add this loader in that route in order to get an HTTP 404 status code.

export const loader = () => {
  return json(null, { status: 404 });
};

Link to doc

A wider perspective

You should show custom ui on 3 types of errors:

unexpected errors like Cannot read properties of undefined (ErrorBoundary in root.tsx)
expected errors like custom logic return json({ errors: [{code: "unpaid", message: "user didnt pay"}] }) (CatchBoundary in root.tsx)
404 (Splat route $.tsx in routes/)

Also you can define a ErrorBoundary/CatchBoundary for each nested route if you think that will give the user a better ux (like in tabs or folders).

回复收藏 0 原文

惟欲睡 2025-02-05 14:00:39

您可以在 root.tsx / root.tsx 中编辑 cacterboundary ，然后返回任何要渲染的内容。

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

  return (
    <html>
      <head>
        <title>Oops!</title>
        <Meta />
        <Links />
      </head>
      <body>
        <h1>
          {caught.status} {caught.statusText}
        </h1>
        <Scripts />
      </body>
    </html>
  );
}

相关文档在这里：

You can edit the CatchBoundary in root.tsx/root.tsx and return whatever you want to render.

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

  return (
    <html>
      <head>
        <title>Oops!</title>
        <Meta />
        <Links />
      </head>
      <body>
        <h1>
          {caught.status} {caught.statusText}
        </h1>
        <Scripts />
      </body>
    </html>
  );
}

Relevant documentation here: https://remix.run/docs/en/v1/guides/not-found#root-catch-boundary

回复收藏 0 原文

多孤肩上扛 2025-02-05 14:00:39

您应该使用 errorboundary 使用嵌套的无路径布局为此。这样，我们正确处理状态代码，就可以使用路线。

学分：

/routes/_layout.tsx ：

import type { MetaFunction } from '@remix-run/node';
import { type ErrorResponse, Outlet, isRouteErrorResponse, useRouteError } from '@remix-run/react';

import { NotFoundSection } from '~/components/not-found-section';

export const meta: MetaFunction = ({ error }) => {
    if (error) {
        return [
            ...((error as ErrorResponse).status === 404 ? [{ title: 'Page Not Found' }] : []),
            { name: 'robots', content: 'noindex, nofollow' },
        ];
    }
};

export default function Layout() {
    return <Outlet />;
}

export function ErrorBoundary() {
    const error = useRouteError();

    if (isRouteErrorResponse(error)) {
        if (error.status === 404) {
            return <NotFoundSection />;
        }

        throw new Error(`${error.status} ${error.statusText}`);
    }

    throw new Error(error instanceof Error ? error.message : 'Unknown Error');
}

upd：dop：不要忘记为非匹配路由添加splat路由
/routes/_layout。$。tsx ：

export const loader = () => {
    throw new Response('Not Found', { status: 404 });
};

export default function SplatRoute() {
    return <></>;
}

然后预处每个路由应遵循此布局，例如/routes/_layout._page。（$ slug）.tsx 。

我的示例，我只想将视图从＆lt; utlet/＆gt; 中嵌套在 root.tsx 中，仅适用于404状态代码，对于其他错误i 投掷在 root.tsx errorboundary中处理的新错误。

You should use ErrorBoundary using nested pathless layout for this. This way we properly handle status code we throw in routes.

credits:
https://sergiodxa.com/tutorials/create-multiple-top-level-layouts-in-remix

/routes/_layout.tsx:

import type { MetaFunction } from '@remix-run/node';
import { type ErrorResponse, Outlet, isRouteErrorResponse, useRouteError } from '@remix-run/react';

import { NotFoundSection } from '~/components/not-found-section';

export const meta: MetaFunction = ({ error }) => {
    if (error) {
        return [
            ...((error as ErrorResponse).status === 404 ? [{ title: 'Page Not Found' }] : []),
            { name: 'robots', content: 'noindex, nofollow' },
        ];
    }
};

export default function Layout() {
    return <Outlet />;
}

export function ErrorBoundary() {
    const error = useRouteError();

    if (isRouteErrorResponse(error)) {
        if (error.status === 404) {
            return <NotFoundSection />;
        }

        throw new Error(`${error.status} ${error.statusText}`);
    }

    throw new Error(error instanceof Error ? error.message : 'Unknown Error');
}

Upd: Don't forget to add splat route for non-matching routes
/routes/_layout.$.tsx:

export const loader = () => {
    throw new Response('Not Found', { status: 404 });
};

export default function SplatRoute() {
    return <></>;
}

Then prepend each route should follow this layout, like /routes/_layout._page.($slug).tsx.

I my example, I want to render view (which will be nested from <Outlet /> in root.tsx) only for 404 status code, for other errors I throw new error to handle in root.tsx ErrorBoundary.

回复收藏 0 原文

流年已逝 2025-02-05 14:00:39

如果上一个答案无法解决您的问题，请尝试此代码。将此代码放在 root.tsx 文件中。

import {
  isRouteErrorResponse,
  useRouteError,
} from "@remix-run/react";

export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>Oops, Error 404</h1>
      </div>
    );
  }
}

If the previous answer didn't solve your problem, try this code. Put this code in the root.tsx file.

import {
  isRouteErrorResponse,
  useRouteError,
} from "@remix-run/react";

export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <div>
        <h1>Oops, Error 404</h1>
      </div>
    );
  }
}

More details: https://remix.run/docs/en/main/route/error-boundary

回复收藏 0 原文