如果您正在使用“create-react-app”命令，

生成一个React应用程序，然后生成包。json文件需要有一个更改，以在浏览器中正常运行的产品构建React SPA。打开文件包。Json，并添加以下代码段，

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

这里最重要的部分是“——history- API -fallback”，用于启用历史API回调。

如果使用Spring或任何其他后端API，有时会出现404错误。因此，在这种情况下，您需要在后端有一个控制器，将任何请求(您想要的)转发给index.html文件，由react-router处理。下面演示了一个使用Spring编写的示例控制器。

@Controller
public class ForwardingController {
    @RequestMapping("/<any end point name>/{path:[^\\.]+}/**")
    public String forward(HttpServletRequest httpServletRequest) {
        return "forward:/";
    }
}

例如，如果我们取一个后端API REST端点为“abc”(http://localhost:8080/abc/**)，任何到达该端点的请求都将重定向到React应用程序(index.html文件)，然后React -router将处理它。

当我在Electron中使用React作为前端，使用React -router-dom作为路由时，我就遇到了这个问题。

我用HashRouter替换了BrowserRouter，这是固定的。

这里有一个简单的例子:

import {
  HashRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

下面是我发现的一个前端解决方案，不需要修改服务器上的任何内容。

假设你的网站是mysite.com，你有一个到mysite.com/about的React Route。 在index.js中，你可以挂载你的顶级组件，你可以像这样放另一个Router:

ReactDOM.render(
<Router>
    <div>
        <Route exact path="/" component={Home} />
        <Route exact path="/about"
            render={(props) => <Home {...props} refreshRout={"/about"}/>}
        />
    </div>
</Router>,

我假设原始路由器位于虚拟DOM的顶级组件之下。如果你正在使用Django，你还必须在你的。url中捕获url:

urlpatterns = [
       path('about/', views.index),
]

不过，这将取决于您使用的后端。请求mysite/about会让你进入index.js(在那里你挂载顶级组件)，在那里你可以使用Route的渲染道具，而不是组件道具，并将'/about'作为道具传递给Home组件，在这个例子中。

在Home中，在componentDidMount()或useEffect()钩子中，执行以下操作:

useEffect() {
   //check that this.props.refreshRoute actually exists before executing the
   //following line
   this.props.history.replace(this.props.refreshRoute);
}

我假设你的Home组件是这样渲染的:

<Router>
   <Route exact path="/" component={SomeComponent} />
   <Route path="/about" component={AboutComponent} />
</Router>

关于如何在路由中向组件传递道具，请参考(将道具传递给React路由器渲染的组件)。

我还没有使用服务器端渲染，但我遇到了与OP相同的问题，其中Link在大多数时候似乎工作正常，但当我有一个参数时就失败了。我将在这里记录我的解决方案，看看它是否对任何人都有帮助。

我的主要JSX内容包括:

<Route onEnter={requireLogin} path="detail/:id" component={ModelDetail} />

这对于第一个匹配的链接很有效，但是当嵌套在该模型的详细页面上的< link >表达式中的:id发生变化时，浏览器栏中的URL会发生变化，但页面的内容最初并没有改变以反映链接的模型。

问题是我已经使用props.params.id在componentDidMount中设置了模型。组件只挂载一次，因此这意味着第一个模型是粘贴在页面上的模型，随后的链接更改了道具，但保持页面看起来不变。

在componentDidMount和componentWillReceiveProps的组件状态中设置模型(其中它基于下一个道具)可以解决问题，并且页面内容更改以反映所需的模型。

在index.html文件头部，添加以下内容:

<base href="/">
<!-- This must come before the CSS and JavaScript code -->

然后，当与Webpack开发服务器一起运行时，使用此命令。

webpack-dev-server --mode development --hot --inline --content-base=dist --history-api-fallback

-history-api-fallback是重要的部分

使用HashRouter对我来说也适用于Redux。只需简单地替换:

import {
    Router //replace Router
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
        <Provider store={Store}>
            <Router history={history}> // Replace here saying Router
                <Layout/>
            </Router>
        </Provider>
    </LocaleProvider>, document.getElementById("app"));

registerServiceWorker();

:

import {
    HashRouter // Replaced with HashRouter
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
        <Provider store={Store}>
            <HashRouter history={history}> //replaced with HashRouter
                <Layout/>
            </HashRouter>
        </Provider>
    </LocaleProvider>, document.getElementById("app"));

registerServiceWorker();