React Router V4嵌套路由器无法进行页面重新加载

时间:2018-07-02 03:36:01

标签: javascript reactjs routing react-router-dom

我创建了一个新网站http://gk-chart.org/,其中包含react和使用react-rotuter-dom添加的路由。

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

,并将路由器添加为:-

<Switch>
  <Route exact path="/" component={Home}></Route>
  <Route path="/galery" component={Galery}></Route>
</Switch>

对于多种图表的嵌套路由,我已在Gallery组件中添加了这些路由

<Route exact path={this.props.match.path} component={LineChart}></Route>
<Route path={`${this.props.match.path}/line`} component={LineChart}></Route>
<Route path={`${this.props.match.path}/lineChartFill`} component={LineChartFill}></Route>
<Route path={`${this.props.match.path}/lineChartComparision`} component={LineChartComparision}></Route>
<Route path={`${this.props.match.path}/lineChartComparisionFill`} component={LineChartComparisionFill}></Route>

单击链接后,路由器可以正常工作,但是当我尝试重新加载页面时,页面将不会再次加载。

在图库页面http://gk-chart.org/galery中,存在多个嵌套的路由,当我单击这些路由时,它们会正确加载,但是当我重新加载页面时,它将不会加载。 请帮助我解决此问题。

2 个答案:

答案 0 :(得分:1)

服务器不知道您的客户端路由。您的构建过程可能会生成一个引用您的资源的index.html。该index.html位于/galery/index.html处。当您单击刷新时,服务器将在/galery/line/index.html上查找文件,找不到该文件。

这是一个常见问题。为了解决此问题,许多人告诉服务器使用/galery/index.html服务而不是使用某种规则。这取决于文件的托管方式。 react应用将在客户端启动,查看稍有不同的路由,并正确呈现该路由。

答案 1 :(得分:0)

最后,我漫游到这么多网站以获得答案后,​​我知道反应有两种类型的路由器:-

  1. 用于静态路由网站的HashRouter,或者可以称为自驱动路由。

  2. BrowserRouter,用于服务器支持的路由。

由于我没有任何类型的服务器支持(节点,python等...),因此我在我的网站上使用了错误的浏览器作为BrowserRouter 所以我必须使用HashRouter

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

使用Hashrouter解决了http://gk-chart.org/的问题。