我正在使用React-router，当我点击链接按钮时，它工作得很好，但当我刷新我的网页时，它没有加载我想要的东西。
例如，我在localhost/joblist和一切都很好，因为我到达这里按下一个链接。但如果我刷新网页，我会得到:
Cannot GET /joblist
默认情况下，它不是这样工作的。最初我有我的URL localhost/#/和localhost/#/joblist，他们工作得很好。但我不喜欢这种类型的URL，所以试图删除#，我写道:
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
这个问题不会发生在localhost/，这个总是返回我想要的。
这个应用程序是单页的，所以/joblist不需要向任何服务器询问任何事情。
我的整个路由器。
var routes = (
<Route name="app" path="/" handler={App}>
<Route name="joblist" path="/joblist" handler={JobList}/>
<DefaultRoute handler={Dashboard}/>
<NotFoundRoute handler={NotFound}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});
用Laravel在React中实现JavaScript SPA的解决方案
公认的答案是对为什么会发生这样的问题的最好解释。如前所述，您必须同时配置客户端和服务器端。
在你的blade模板中，包括JavaScript绑定文件，确保像这样使用URL外观:
<script src="{{ URL::to('js/user/spa.js') }}"></script>
在路由中，确保将此添加到刀片模板所在的主端点。例如,
Route::get('/setting-alerts', function () {
return view('user.set-alerts');
});
以上是刀片模板的主要端点。现在再添加一条可选路线，
Route::get('/setting-alerts/{spa?}', function () {
return view('user.set-alerts');
});
发生的问题是，首先加载刀片模板，然后加载React路由器。当你加载'/setting-alerts'时，它会加载HTML内容和JavaScript代码。
但是当你加载'/setting-alerts/about'时，它首先在服务器端加载。因为它在服务器端，所以这个位置上没有任何东西，并且它返回not found。当你有可选的路由器时，它加载同一个页面，React路由器也被加载，然后React加载器决定显示哪个组件。
下面是我发现的一个前端解决方案，不需要修改服务器上的任何内容。
假设你的网站是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的组件状态中设置模型(其中它基于下一个道具)可以解决问题，并且页面内容更改以反映所需的模型。
