Remix在SPA模式下，出现ErrorBoundary错误页加载Ant Design组件报错，不能加载样式的问题
Remix是一个既能做服务端渲染，又能做单页应用的框架，如果想做单页应用，又想学服务端渲染，使用Remix可以降低学习成本。最近，在学习Remix的过程中，遇到了在SPA模式下与Ant Design整合的问题。
我用Remix官网的命令下载了一个SPA的模板
npx create-remix@latest --template remix-run/remix/templates/spa
我们知道，Remix有一个ErrorBoundary组件，是用来显示错误页的，比如404页面，我在root.tsx导出了这个组件
export function ErrorBoundary(){
const navigate=useNavigate()
return (
<Result
status="404"
title="404"
subTitle="抱歉，你访问的页面不存在。"
extra={<Button type="primary" onClick={() => navigate(-1)}>返回</Button>}
/>
)
}
这里面使用了Ant Design的Result组件，用来显示404错误信息，结果在测试过程中发现页面卡死，CPU温度飙高，浏览器控制台不停报错，而且页面中样式也没加载出来，排版混乱。
后来，我花了几天研究这个问题，发现是root.tsx中的Layout组件搞的鬼。Layout组件是用来定义root.tsx中的布局的，它会把ErrorBoundary组件当作静态内容给放进去，因此无法动态加载Ant Design组件对应的样式，并且出现一大堆报错，导致CPU空转，温度飙高。因此，我注释了这个组件，
// export function Layout({ children }: { children: React.ReactNode }) {
// return (
// <html lang="en">
// <head>
// <meta charSet="utf-8" />
// <meta name="viewport" content="width=device-width, initial-scale=1" />
// <Meta />
// <Links />
// </head>
// <body>
// {children}
// <ScrollRestoration />
// <Scripts />
// </body>
// </html>
// );
// }
后来在Remix官网找到了解决办法。
首先，在app目录下新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <title>My Cool App!</title> -->
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="app"><!-- Remix SPA --></div>
</body>
</html>
这里面建议不要有title标签，否则Remix给不同的路由添加的title会失效。然后，修改root.tsx
export default function App() {
return (
<>
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet/>
<ScrollRestoration />
<Scripts />
</body>
</html>
</>
);
}
export function HydrateFallback() {
return (
<>
<ProSkeleton type="list"></ProSkeleton>
<Scripts/>
</>
)
}
其中，App组件是用来加载路由组件的，里面需要包含Meta 和Links 标签，才能使每个路由导出的Meta和Links生效，保证样式文件能够正常加载，HydrateFallback组件是在路由跳转过程中显示加载状态的页面，如骨架屏。
接着，在app下创建entry.server.tsx
import fs from "node:fs";
import path from "node:path";
import type { EntryContext } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
const shellHtml = fs
.readFileSync(
path.join(process.cwd(), "app/index.html")
)
.toString();
const appHtml = renderToString(
<RemixServer context={remixContext} url={request.url} />
);
const html = shellHtml.replace(
"<!-- Remix SPA -->",
appHtml
);
return new Response(html, {
headers: { "Content-Type": "text/html" },
status: responseStatusCode,
});
}
修改app下的client.entry.tsx
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
startTransition(() => {
hydrateRoot(
document.querySelector("#app") || document,
<StrictMode>
<RemixBrowser/>
</StrictMode>
);
});
这样，就能把路由组件加载到index.html中的
<div id="app"><!-- Remix SPA --></div>
了。
然后，我测试了一下，发现404页面能够正常跳转，没有样式加载错误了。
原文地址：https://blog.csdn.net/woshihedayu/article/details/142415091
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！