Question

所以我在我的应用程序中设置了以下路线：

<Router history={history}>      
    <div>
      <Route path={'/'} exact component={Home} />
      <Route path={'/cachaca/:bottle'} component={BottlePage} />
      <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} />
    </div>
</Router>

在应用程序的不同部分，我以编程方式使用history.push在应用程序中导航：

history.push({
  pathname: '/',
  search: '?startRange='+ startRange + '&endRange='+ endRange + '&maker=0'
})

奇怪的是，当代码运行时，它会触发两个动作 - 一个PUSH和一个POP导致应用程序导航两次。这是我们在一次推送后从历史监听器日志中获得的信息：

The current URL is /?startRange=0&endRange=31&maker=0
The last navigation action was PUSH
The current URL is /?startRange=0&endRange=31&maker=0
The last navigation action was POP

查询参数正在正确存储，其他一切似乎工作正常，但我想知道是什么可以创建这个问题，以便我的用户不必返回两次去他实际应该的位置。

顺便说一句，这就是我如何设想历史'插件'：

import createHistory from 'history/createBrowserHistory'

const history = createHistory() 

history.listen((location, action) => {
  console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`)
  console.log(`The last navigation action was ${action}`)
})

export default history

还有另一个实例，其中推送更改了网址位置栏，但实际上并未在任何地方导航，但我会将其保存为另一个问题。

我做错了吗？感谢任何帮助！谢谢！

Answer 1

看起来你正在尝试混合和匹配react-router v2和v4，这是非常不同的。请参阅评论here。

React Router 4 + history.push触发PUSH和POP

1 个答案: