React-snapshot 使用 create-react-app 和 serve 在所有路由上预渲染 index.html

Question

我正在使用 create-react-app 和 react-snapshot 进行预渲染。 使用 serve 服务构建

serve -s build -l 80

但奇怪的是，对于所有路由，只有 index.js 是预渲染的。

下面是package.json中的react-snapshot配置

"reactSnapshot": {
    "exclude": [
      "/districts-data",
      "/districts-data?*",
      "/suggest-time",
      "/covid-19-statistics"
    ],
    "snapshotDelay": 300
  }

我已经排除了所有包含延迟加载的路径。 我已经完成了这个答案，但我没有在我的服务人员中发现任何东西，只是为 PWA 保留了它。

sw.js

self.addEventListener('fetch', function (event) {

});

self.addEventListener('install', function (event) {

});

self.addEventListener('activate', (event) => { });

Answer 1

在投入几天时间并深入研究serve代码后，我意识到我犯的错误是在运行服务脚本时使用了 -s 选项。

serve -s build -l 80

使用 -s 选项默认从 index.html 提供的所有路由。如果您只是提供通过 Create react app 生成的构建，则使用 -s 标志是必不可少的，否则“/”以外的路由将返回响应 400。

如果您已预渲染所有路由，则可以简单地使用serve build但如果有一些路由您没有预渲染 HTML 可用（对于我的用例，它是使用延迟加载的组件），那么您可以创建 serve .json 在指定源和目标的公用文件夹中。

 {
  "rewrites": [
    { "source": "/districts-data", "destination": "/200.html" },
    { "source": "/districts-data?*", "destination": "/200.html" },
    { "source": "/suggest-time", "destination": "/200.html" },
    { "source": "/covid-19-statistics", "destination": "/200.html" }
  ]
}

您还需要将服务命令更改为serve -c serve.json build 。 -c 用于告诉 Specify custom path to serve.json 。