4

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

<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

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

难道我做错了什么？感谢任何帮助！谢谢！

4

1 回答 1

2

看起来您正在尝试混合和匹配 react-router v2 和 v4，它们非常不同。请参阅此处的评论。

于 2017-03-31T22:38:48.093 回答