react-snap 和 react-router 一起出问题答案

【问题标题】：react-snap and react-router together make a problemreact-snap 和 react-router 一起出问题
【发布时间】：2018-11-11 13:13:55
【问题描述】：

我需要启动一个 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();

有什么想法吗？

【问题讨论】：

您找到解决方案了吗？

标签： react-router create-react-app react-snap

【解决方案1】：

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

"reactSnap": {
  "fixWebpackChunksIssue": false
}

查看以下链接了解更多信息和其他选项

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

【讨论】：

嗯，我遇到了同样的问题，但现在似乎不起作用。

【解决方案2】：

我已经为此奋斗了几个星期了。我注意到的主要事情是，如果我在 index.js 中调用 registerServiceWorker()，应用程序将在构建后正常运行。如果我注释掉这一行，应用程序只会路由到 '/' 无论如何。

您似乎正在注销 index.js 中的 service worker，这可能会导致问题。

我遇到但无法解决的问题 22 是，如果我在 index.js 中使用 registerServiceWorker() 调用，react-snap 不会正确预渲染所有路由，如果我这样做了注释掉 registerServiceWorker() 行，react-snap 完美预渲染所有路由，但应用无法导航。

另外值得注意的是，我的项目是使用“create-react-app”创建的，并且没有被弹出。

【讨论】：