react-snap和react-router一起出现问题 [英] react-snap and react-router together make a problem

问题描述

我需要启动一个React应用程序，并且需要预渲染和路由，因此我安装了react-snap和react-router。 （显然，react-router进行路由和react-snap来进行预渲染。）

I need to start a react application and I need pre-rendering and routing, so I installed react-snap and react-router. (The react-router to do the routing and react-snap for pre-rendering obviously).

在本地，一切看起来都很不错，带有 npm start，但正如我所做的那样生产版本并为其提供服务，路由链接使页面重定向到新的URL，所以我经常看到的就是主页。

Everything looks fine in the local with 'npm start' but as I make a production build and serve it, the routing links make the page redirect to a new url, so all i see always, is the homepage.

我的渲染如下所示：

 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>
    );
  }

这是我的index.js，如react-snap所建议

and this is my index.js as suggested by react-snap

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();

有什么想法吗？

推荐答案

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

I've been able to fix a similar issue by adding the following snippet to my package.json

"reactSnap": {
  "fixWebpackChunksIssue": false
}

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

Check the following link for more information and other options

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

这篇关于react-snap和react-router一起出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！