按照此处提供的示例https://reacttraining.com/react-router/examples/url-params。
我为我的网站构建了自己的路线,如下所示:
<Router>
<div>
<Route path='/' exact component={Layout} />
<PublicRoute authed={this.state.authed} exact path='/login' component={Login} />
<PublicRoute authed={this.state.authed} exact path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />
<Route path='/cachaca/:bottle' component={Layout} />
<Route render={() => <h3>No Match</h3>} />
</div>
</Router>
这与给出的示例非常相似,只是导航(或链接到)位于页面中的其他位置。
路线本身运行良好。我可以获得匹配信息,我可以成功检查用户是否登录等等。
我唯一的问题是 URL 栏没有改变以反映导航的变化,所以如果我坐在 localhost:3000/cachaca/1234 并单击回家,主页将加载但 URL 栏仍将显示'本地主机:3000/cachaca/1234'。
我从 react router 2/3 看到了与我类似的帖子,这些帖子似乎表明 history 道具是导致此问题的原因 - 但我不相信在 Router 4 中会出现这种情况。
除此之外,react 培训网站中的示例有效,而我的(似乎遵循相同的步骤)没有。
我在这里错过了什么吗?为什么我没有得到与培训网站相同的结果。
这是我正在使用的导航链接:
<Link to={"/"}>Home</Link>
感谢任何帮助,谢谢!