我创建了一个新网站 http://gk-chart.org/使用react-rotuter-dom进行 react 并添加路由。
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
并将路由器添加为:-
<Switch>
<Route exact path="/" component={Home}></Route>
<Route path="/galery" component={Galery}></Route>
</Switch>
对于多种类型图表的嵌套路由,我已在图库组件中添加了这些路由
<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存在多个嵌套路由,当我单击这些路由时,它们会正确加载,但是当我重新加载页面时,它不会加载。 请帮我解决这个问题。
最佳答案
服务器不知道您的客户端路由。您的构建过程可能会生成一个引用您的资源的index.html。该index.html 被放置在/galery/index.html
中。当您单击“刷新”时,服务器会在 /galery/line/index.html
中查找文件,但没有找到。
这是一个常见问题。为了解决这个问题,许多人告诉服务器提供 /galery/index.html
而不是使用某种规则。这取决于您的文件的托管方式。 React 应用程序将在客户端启动,看到略有不同的路线,并正确渲染路线。
关于javascript - React Router V4 嵌套路由器在页面重新加载时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51128845/