当前位置：首页 > news >正文

Remix在SPA模式下，出现ErrorBoundary错误页加载Ant Design组件报错，不能加载样式的问题

news 2026/3/30 19:50:39

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 (<Resultstatus="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页面能够正常跳转，没有样式加载错误了。
在这里插入图片描述

Remix在SPA模式下，出现ErrorBoundary错误页加载Ant Design组件报错，不能加载样式的问题

相关文章：

Remix在SPA模式下，出现ErrorBoundary错误页加载Ant Design组件报错，不能加载样式的问题

ADB ROOT开启流程

传输层协议 —— TCP协议（上篇）

YOLOv8改进，YOLOv8的Neck替换成AFPN（CVPR 2023）

学习大数据DAY59 全量抽取和增量抽取实战

YOLOv8——测量高速公路上汽车的速度

在线相亲交友系统：寻找另一半的新方式

MySQL 中存储过程参数的设置与使用

2k1000LA 调试HDMI

24年蓝桥杯及攻防世界赛题-MISC-1

前端项目代码开发规范及工具配置

【JVM】JVM执行流程和内存区域划分

Python | 读取.dat 文件

信息技术的变革与未来发展的思考

融会贯通记单词，绝对丝滑，一天轻松记几百

【计算机视觉】YoloV8-训练与测试教程

响应式布局-媒体查询父级布局容器

Android APN type 配置和问题

前端mock了所有……

fiddler抓包10_列表显示请求方法

3步精通Calibre电子书转换：从格式兼容到专业排版指南

3大核心挑战+5步完美防御：RevokeMsgPatcher让消息撤回彻底失效

Unity LineRenderer不只是画线：5个实战案例教你做激光、轨迹与魔法特效

实测通义千问3-Reranker-0.6B：轻量模型如何让电商商品搜索更准确

QGC地面站视频流配置避坑指南：从Windows到Android，手把手解决‘无画面’问题

拒绝PPT运维！实测实在Agent：IT运维服务器监控与故障预警的“降维打击”

基于圣女司幼幽-造相Z-Turbo的Java面试题智能生成与解析实战

Qwen2.5-VL-7B-Instruct图文对话教程：上传图片提问、多轮追问、结果导出全流程

Phi-4-mini-reasoning在ollama中启用flash attention：推理速度提升实测报告

零基础掌握开源工具：3步实现群晖Photos功能强化