reactjs - React Router 4 链接不更新网址栏

标签 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>

这与给出的示例非常相似,只是导航(或链接到)位于页面中的其他位置。

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

我唯一的问题是 URL 栏没有更改以反射(reflect)导航更改,因此如果我坐在 localhost:3000/cachaca/1234 并单击返回主页,主页将加载,但 URL 栏将加载仍然显示“localhost:3000/cachaca/1234”。

我在 React router 2/3 中看到过类似的帖子,这些帖子似乎表明历史属性是导致此问题的原因 - 但我不认为 Router 4 中会出现这种情况。

除此之外,React 培训网站中的示例有效,而我的示例(似乎遵循相同的步骤)则无效。

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

这是我正在使用的导航链接:

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

感谢任何帮助, 谢谢!

最佳答案

哇,这很愚蠢 - 但我在这方面浪费了我一整天的时间,所以将发布此内容,希望能节省其他人的时间:

事实证明它不起作用,因为我正在 webpack-dev-server/文件夹上进行测试,而 React-router 4 似乎有问题。

当我从 http://localhost:3000/webpack-dev-server/cachaca/asdf 出发时至http://localhost:3000/cachaca/asdf网站开始按其应有的方式运行 - 无论是内容还是地址栏中的位置。

祝大家编码愉快!

关于reactjs - React Router 4 链接不更新网址栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42834125/

相关文章:

node.js - 如何在服务器端使用express获取react-router v4定义的参数

javascript - Leaflet React在功能组件中获取 map 实例

reactjs - 导入 axios 后的 Webpack 5 - "Unexpected token: punc (.)"

reactjs - reactjs中的setState在成功函数中不设置状态

reactjs - React Router v4 - 错误 : React. Children.only 预计会收到单个 React 元素子元素

javascript - 与react-router-dom 4 react - 无法读取未定义的属性 'params'

reactjs - 如何为不同的屏幕设置不同的导航模式?

html - 如何将背景图像应用于一个 react 页面而不是整个应用程序?

reactjs - React Router v4 路由不起作用

javascript - Redux - 如何在其提交处理程序中获取表单值并调用 event.preventDefault()?