网站后台点击添加图片没有反应,授权登录网站怎么做,浙江住房和城乡建设厅报名网站,北京精兴装饰公司Remix是一个既能做服务端渲染#xff0c;又能做单页应用的框架#xff0c;如果想做单页应用#xff0c;又想学服务端渲染#xff0c;使用Remix可以降低学习成本。最近#xff0c;在学习Remix的过程中#xff0c;遇到了在SPA模式下与Ant Design整合的问题。 我用Remix官网…Remix是一个既能做服务端渲染又能做单页应用的框架如果想做单页应用又想学服务端渲染使用Remix可以降低学习成本。最近在学习Remix的过程中遇到了在SPA模式下与Ant Design整合的问题。 我用Remix官网的命令下载了一个SPA的模板
npx create-remixlatest --template remix-run/remix/templates/spa我们知道Remix有一个ErrorBoundary组件是用来显示错误页的比如404页面我在root.tsx导出了这个组件
export function ErrorBoundary(){const navigateuseNavigate()return (Resultstatus404title404subTitle抱歉你访问的页面不存在。extra{Button typeprimary 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 langen
// head
// meta charSetutf-8 /
// meta nameviewport contentwidthdevice-width, initial-scale1 /
// Meta /
// Links /
// /head
// body
// {children}
// ScrollRestoration /
// Scripts /
// /body
// /html
// );
// }后来在Remix官网找到了解决办法。 首先在app目录下新建index.html
!DOCTYPE html
html langen
head!-- titleMy Cool App!/title --meta charSetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1 /
/headbodydiv idapp!-- Remix SPA --/div
/body/html这里面建议不要有title标签否则Remix给不同的路由添加的title会失效。然后修改root.tsx
export default function App() {return (html langenheadmeta charSetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1 /Meta /Links //headbodyOutlet/ScrollRestoration /Scripts //body/html/);
}export function HydrateFallback() {return (ProSkeleton typelist/ProSkeletonScripts//)
}其中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,StrictModeRemixBrowser//StrictMode);
});这样就能把路由组件加载到index.html中的
div idapp!-- Remix SPA --/div了。 然后我测试了一下发现404页面能够正常跳转没有样式加载错误了。
