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

【问题标题】：React-snapshot pre-renders index.html on all routes with create-react-app and serveReact-snapshot 使用 create-react-app 和 serve 在所有路由上预渲染 index.html
【发布时间】：2020-06-19 19:04:42
【问题描述】：

我正在使用 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
  }

我已经排除了所有包含延迟加载的路径。我已经完成了this 的回答，但我没有在我的服务人员身上发现任何东西，只是将它保留用于 PWA。

sw.js

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

});

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

});

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

【问题讨论】：

标签： javascript reactjs create-react-app prerender

【解决方案1】：

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

serve -s build -l 80

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

如果你已经预渲染了所有路由，但如果有一些路由没有预渲染的 HTML 可用，你可以简单地使用 serve build（对于我的用例，它是使用延迟加载的组件）然后您可以在 public 文件夹中创建 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 用于告诉指定serve.json的自定义路径。

【讨论】：