react-snap和react-router一起出现问题

Question

我需要启动一个react应用程序，我需要预渲染和路由，所以我安装了react-snap和react-router。(使用react-router进行路由，并使用react-snap进行预渲染)。

使用'npm start‘在本地看起来一切正常，但是当我做了一个产品构建并为它提供服务时，路由链接使页面重定向到一个新的url，所以我看到的总是主页。

我的渲染看起来像这样：

 render() {
    return (
      <Router>
        <React.Fragment>
          <MainNav/>
          <Route exact path="/" component={Home}/>
          <Route path="/greeting/:name/:surname" render={(props) => <Greetings text="Hello, " {...props} />} />
          <Route path="/About" component={About}/>
        </React.Fragment>
      </Router>
    );
  }

这是react-snap建议的index.js

import React from 'react';
import { hydrate, render } from "react-dom";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement);
} else {
  render(<App />, rootElement);
}

serviceWorker.unregister();

有什么想法吗？

Answer 1

通过将以下代码片段添加到我的package.json中，我已经能够解决类似的问题

"reactSnap": {
  "fixWebpackChunksIssue": false
}

有关更多信息和其他选项，请查看以下链接

https://github.com/stereobooster/react-snap/issues/264

Answer 2

我已经和这个问题斗争了几个星期了。我注意到的主要事情是，如果我在index.js中调用registerServiceWorker()，应用程序在构建后将正常工作。如果我注释掉这一行，无论发生什么，应用程序只会路由到'/‘。

您似乎正在注销index.js中的服务工作者，这可能会导致问题。

我遇到的一个难题是，如果我在index.js中使用registerServiceWorker()调用，react-snap不会正确地预渲染所有的路由，如果我注释掉了registerServiceWorker()行，react-snap会完美地预渲染所有的路由，但是应用程序不能导航。

同样值得注意的是，我的项目是使用'create-react-app‘创建的，并且没有被弹出。