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

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

查询参数已正确存储，其他一切似乎都工作正常，但我想知道是什么导致了这个问题，这样我的用户就不必返回两次以转到他实际应该去的地方到.

顺便说一下，我是这样想出历史的'plugin':

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

还有另一个实例，其中推送更改了 url 位置栏但实际上并没有导航到任何地方，但我将把它留到另一个问题。

我是不是做错了什么？感谢任何帮助！谢谢！

Answer 1

看起来您正在尝试混合搭配 react-router v2 和 v4，它们非常不同。见评论 here.

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

React Router 4 + history.push firing PUSH and POP

history.js

reactjs

react-router

react-router-v4