react-router-redux 的“push”方法和 react-router 的“browserHistory”有啥区别？

Posted 2023-02-21

【中文标题】react-router-redux 的“push”方法和 react-router 的“browserHistory”有啥区别？

【英文标题】：What is the difference between "push" method from react-router-redux and "browserHistory" from react-router?react-router-redux 的“push”方法和 react-router 的“browserHistory”有什么区别？

【发布时间】：2017-09-25 06:55:28

【问题描述】：

当用户从一个页面/路线导航到另一个页面/路线时，我正在尝试更新 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'))

请帮忙。在此先感谢:)

【参考方案1】：

有两种情况

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

所以本质上没有区别，区别在于调用connected-react-router的push方法会在内部调用历史的push

【参考方案2】：

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

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

同时

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

From the source code itself

/** * 这些动作对应于历史API。 * 相关联 routerMiddleware 将在这些事件到达之前捕获它们 * 您的 reducer 并重新发布它们作为您历史记录中的匹配函数。 */

export const push = updateLocation('push')

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

【讨论】：

如果已经在使用下面的代码将历史记录与商店同步怎么办？ const reduxHistory = syncHistoryWithStore(browserHistory, store);

接受答案，因为它非常接近我想要的。如果没有同步 browserHistory 和 store，可以直接使用 react-router-redux 的 push 方法来维护 store 中的路由历史。

有什么方法可以导航到without 推送到堆栈的路线？

@KevinGhaboosi 为什么需要这样做？

在我的 Web 应用程序中，有些情况下用户可能会选择通过转到 ../new 之类的路径然后返回或单击其他位置来创建新对象。在多次后按时，我注意到跳转到../new 会留下一个奇怪的用户体验。尽管我们的一些用户知道他们访问过该特定页面，但他们也感到困惑。因此，我认为我会阻止这些页面被缓存，以便用户看到更好的用户流。