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
  }

我已经排除了所有包含延迟加载的路径。我已经完成了的回答，但我没有在我的 service worker 中发现任何东西，只是为 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

如果您只是提供通过 Create react app 生成的构建，则使用 -s 选项默认所有从 index.html.Having 提供的路由是必不可少的，否则“/”以外的路由将 return 响应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 用于告诉 Specify custom path to serve.json.

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

React-snapshot pre-renders index.html on all routes with create-react-app and serve

javascript

prerender

reactjs

create-react-app