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

我已经为此战斗了两个星期。我注意到的主要事情是，如果我在index.js中调用registerServiceWorker（），则该应用在构建后将正常运行。如果我注释掉这一行，则无论如何，该应用程序都只会路由到“ /”。

看来您要在index.js中注销服务工作者，这可能会导致问题。

我碰到的一个棘手且无法解决的问题是，如果我在index.js中使用registerServiceWorker（）调用，则react-snap不会正确地预渲染所有路由，如果执行注释掉registerServiceWorker（）行，react-snap可以完美渲染所有路线，但是该应用程序无法导航。

还值得注意的是，我的项目是使用“ create-react-app”创建的，尚未弹出。

Answer 2

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

"reactSnap": {
  "fixWebpackChunksIssue": false
}

检查以下链接以获取更多信息和其他选项

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

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

2 个答案: