我有一个用打字稿中的 razzle 制作的服务器端渲染反应应用程序。这就是我想要实现的。我希望服务器在呈现我的应用程序中的任何页面之前获取经过身份验证的数据，将其发送到商店，然后将其插入呈现的文档中，以便客户端在商店中提取和使用。

我已经可以使用react-router-config和promise对特定路由执行调度操作，并且每个请求都是通过 axios 发出的。

我的商店

getSession 的动作

服务器.ts

renderer.tsx // 从我们的 Redux 存储中获取初始状态

但是我的商店没有更新，并且我仍然拥有与初始状态相同的数据。

笔记

• 我检查了浏览器呈现的 HTML，这是我收到的初始状态
• 似乎这些操作并没有更新我的状态，因为我在减速器中插入了一些 console.logs 并且终端上没有出现日志
• getSession在客户端上运行良好。

我在我的服务器端渲染应用程序中集成了材质 UI，并遵循了此处给出的代码。Material UI css 已添加到服务器端本身的 html 中。

但是，在初始加载时，没有应用材质 ui 样式，这会导致它闪烁。

我尝试<cssbaseline>与下面的代码一起使用，但没有发现任何区别。

这是我的代码：server.js

客户端.js

我一直在使用razzle通过 react+redux 进行服务器端渲染。现在，我需要在此设置中集成 AMP。我发现了几个nextJS的例子。我应该在主 HTML 中添加 amp.js 还是应该有单独的 server.js 用于呈现 AMP 页面和如何。如何处理amp与现有路线相关的路线。

这是我的 server.js

客户端.js

我们现在对大约 20 个用于同步loadable.lib加载 npm 模块的新文件使用延迟加载。react-toastify更改正在草稿 PR 中等待，但似乎单元测试已损坏，因为它们不等待loadable.lib-passed 模块被加载。

预期成绩

能够模拟loadable.lib，使其与以前完全一样工作，但同步加载给定的库，并且在单元测试中，这被视为loadable.lib结果组件的子级可以访问该库，并且第一次渲染成功完成。

实际结果

旧快照（充满标签和嵌套的东西和道具）和新快照 ( null) 不匹配。这些不起作用：

如果可以模拟loadable.lib函数以呈现其子函数而不是等待加载某个库，我不知道如何填充代码使用的未定义变量，因为我有使用可加载的可加载的可加载的，使用可加载的等等上。

我读过有一些 WebPack 提示，例如webpackPrefetchandwebpackPreload但我不确定这是否是一条好路。

我尝试过的相关链接

1. 我正在处理的代码（还有 19 个类似的其他文件）：https://github.com/silviubogan/volto/blob/1d015c145e562565ecfa058629ae3d7a9f3e39e4/src/components/manage/Actions/Actions.jsx（我目前正在工作总是react-toastify通过加载loadable.lib。）

2. https://medium.com/pixel-and-ink/testing-loadable-components-with-jest-97bfeaa6da0b - 我尝试做类似该文章中的代码的事情，但它不起作用：

一点点代码

取自上面的链接，这是我目前使用 react-toastify （命名LoadableToast）的方式：

结论

换句话说，我如何模拟动态导入？如何让 jest 跳过延迟加载并提供一个值，而不是让测试等待接收一个值？

谢谢！

更新 1

使用以下新代码，仍然无法正常工作：

我正在尝试使用 react JS + Razzle + Redux 构建一个服务器端渲染应用程序。所以我创建了如下两条路线。

我目前有两条路线，一条是回家，第二条是测试，我面临的问题是，它没有改变路线，只是显示回家

我已经尝试过这两种Router选择StaticRouter。

请指教。

服务器/index.js

客户端/index.js

应用程序.js

历史.js

家

家庭测试

谢谢

我有一个使用 Create react app 构建的项目。我现在需要为我的应用程序提供服务器渲染，我发现 Razzle 是最简单的实现方法。

我有 /src，其中包含所有组件以及一个图像文件夹以及公共文件夹中的一些东西。和 node_modules 文件夹最后我在 package.json 中有依赖项

我应该将它们复制粘贴到 Razzle 吗？我已经尝试过，但出现错误webpack_require和 TypeError：无法读取未定义的属性“原型”？

转换为 Razzle 的最佳方式是什么？

谢谢

我的系统上有一个大型应用程序的克隆，运行后npm install，这是我的日志：

之后当我运行npm start这是我的日志：

我知道项目很火爆。

我的 react 项目是使用 Razzle.js 创建的，我最近从一个 repo 下载了它。我正在尝试运行这个项目，但是如果我yarn start，我卡在这个屏幕上 - 它显示源代码已编译并且服务器正在运行localhost:3000，但它不会启动服务器。

所以我有一个非常简单的营销网站，非常漂亮。在这个很棒的网站中，我想嵌入一个<iframe>我正在尝试销售的实际应用程序的演示。

我继续构建我的反应应用程序，npm run build然后将输出复制build/到快速应用程序/public目录中。

现在的问题是我无法看到 React 应用程序，因为它的资源（图像、js、css 等）是相对于根目录的，而 React 应用程序不在根目录中，它位于静态子文件夹中。

这种情况发生在react 应用程序文件server.js所在的位置旁边，index.html但是现在该应用程序正在由另一个网站的 server.js 提供服务，所有资源都被破坏了。

父应用程序在中提供/，但反应应用程序在/demoapp问题中提供的是它的所有资源都指向 / 而不是 /demoapp

这就是我一直在尝试做的事情：

我正在将一个项目从 react-app-rewired 迁移到 Razzle。

tsconfig.json 是这样的：

那个部分

在我的情况下不起作用。

这是在我的 package.json 文件中： "start": "BROWSER=chromium concurrently \"npm run start:tsc\" \"razzle start\"",

我运行 npm start 并在客户端编译错误部分收到此消息：

Cannot find module '@/redux/authSlice'.

我认为相关的依赖项是：

我也尝试将以下内容放入我的razzle.config.js文件中，但没有成功：

调试此问题的下一步是什么？我该如何解决这个问题？

谢谢！