react-router-redux 的 "push" 方法和 react-router 的 "browserHistory" 方法有什么区别？

Question

当用户从一个 page/route 导航到另一个时，我正在尝试更新 react 中的历史记录。但是对我应该使用什么方法来实现这个以及为什么感到困惑？

import { browserHistory } from 'react-router'
browserHistory.push('/bag')

或

import { routerMiddleware, push } from 'react-router-redux'
const middleware = routerMiddleware(browserHistory)
const store = createStore(
  reducers,
  applyMiddleware(middleware)
)

store.dispatch(push('/bag'))

请帮忙。提前致谢:)

Answer 1

本质上，如果您了解使用 redux 和 react-router-redux 的原因：

store.dispatch(push('/bug')) 在商店中保持导航状态，推送并导航到路由

同时

browserHistory.push('/bag') 只是推送并导航到路由。

From the source code itself

/**
* These actions correspond to the history API.
* The associated routerMiddleware will capture these events before they get to
* your reducer and reissue them as the matching function on your history. */

export const push = updateLocation('push')

我建议在尝试了解差异或工作原理时查看源代码。它有利于学习，也有助于深入了解您正在使用的库发生了什么:)

Answer 2

有两种情况

如果您已将 connected-react-router 与您的 redux 存储集成，那么它是 push 方法，指示历史记录更改位置，因此浏览器 URL 发生变化，但是如果您使用来自 browserHistory 的推送进行导航，您正在直接调用历史记录来更改位置
接下来要了解的重要事情是使用任一方法，connected-react-router 的 LOCATION_CHANGE 操作将被调用，这将导致呈现适当的组件

so in essence there is no difference, the difference being calling push method of connected-react-router will call the push on the history internally

react-router-redux 的 "push" 方法和 react-router 的 "browserHistory" 方法有什么区别？

What is the difference between "push" method from react-router-redux and "browserHistory" from react-router?

reactjs

react-router

react-router-redux