我正在使用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);
});
在后端使用Express.js，在前端使用React(没有React -create-app)和reach/router，正确的reach/router路由React组件会显示出来，当在地址栏中点击Enter时，菜单链接将被设置为活动样式，例如http://localhost:8050/pages。
请签出以下内容，或直接访问我的存储库https://github.com/nickjohngray/staticbackeditor。所有的代码都在那里。
网络包：
设置代理。这允许任何从端口3000 (React)调用服务器，
包括当按下回车键时在地址栏中获取index.html或任何东西的调用。它还允许调用API路由来获取JSON数据。
比如await axios。Post ('/api/login'， {email, pwd}):
devServer: {
port: 3000,
open: true,
proxy: {
'/': 'http://localhost:8050',
}
}
设置Express.js路由
app.get('*', (req, res) => {
console.log('sending index.html')
res.sendFile(path.resolve('dist', 'index.html'))
});
这将匹配React的任何请求。它只返回dist文件夹中的index.html页面。当然，这个页面有一个更单页的React应用程序。(注意任何其他路由都应该出现在这个上面，在我的情况下，这些是我的API路由。)
反应路线
<Router>
<Home path="/" />
<Pages path="pages"/>
<ErrorPage path="error"/>
<Products path="products"/>
<NotFound default />
</Router>
这些路由是在我的布局组件中定义的，当路径匹配时，该组件将加载相应的组件。
React布局构造函数
constructor(props) {
super(props);
this.props.changeURL({URL: globalHistory.location.pathname});
}
Layout构造函数在加载时立即被调用。在这里，我调用我的redux操作changeURL，我的菜单监听，所以它可以突出显示正确的菜单项，如下所示:
菜单的代码
<nav>
{this.state.links.map( (link) =>
<Link className={this.getActiveLinkClassName(link.path) } to={link.path}>
{link.name}
</Link>)}
</nav>
下面是我发现的一个前端解决方案，不需要修改服务器上的任何内容。
假设你的网站是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路由器渲染的组件)。
