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

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

您似乎正在取消注册 index.js 中的服务工作人员，这可能会导致问题。

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

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