React Router 4链接不更新url栏

时间:2017-03-16 12:27:45

标签: reactjs react-router-v4

按照此处提供的示例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>

这与给出的示例非常相似,除了导航(或链接)在页面中的其他位置。

路线本身运作良好。我可以获得匹配信息,我可以成功检查用户是否登录等等。

我唯一的问题是网址栏没有更改以反映导航更改,所以如果我坐在localhost:3000 / cachaca / 1234并点击回家,主页将加载但网址酒吧仍将显示&#39; localhost:3000 / cachaca / 1234&#39;。

我已经从反应路由器2/3看到类似的帖子,似乎表明历史道具是导致此问题的原因 - 但我不相信是这样的在路由器4中。

除此之外,反应训练网站的例子和我的(我们似乎遵循相同的步骤)的例子没有。

我在这里遗漏了什么吗?为什么我没有得到与培训网站相同的结果。

以下是我使用的导航链接:

<Link to={"/"}>Home</Link>

感谢任何帮助, 谢谢!

1 个答案:

答案 0 :(得分:2)

哇,这很愚蠢 - 但是我整整都浪费在这里,所以发布这篇文章是为了挽救别人一段时间:

原来它不起作用,因为我正在webpack-dev-server /文件夹上进行测试而且react-router 4似乎有问题。

当我从http://localhost:3000/webpack-dev-server/cachaca/asdf转到http://localhost:3000/cachaca/asdf时,网站开始表现得如此 - 内容及其在网址栏中的位置。

快乐编码给所有人!