6

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

有任何想法吗？

4

2 回答 2

2

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

"reactSnap": {
  "fixWebpackChunksIssue": false
}

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

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

于 2018-11-27T21:55:24.623 回答
1

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

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

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

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

于 2018-11-27T21:28:13.690 回答