react-router 4.0、react-router-dom 和 react-router-redux 有啥区别？

Posted 2023-02-21

【中文标题】react-router 4.0、react-router-dom 和 react-router-redux 有啥区别？

【英文标题】：What is difference between react-router 4.0, react-router-dom and react-router-redux?react-router 4.0、react-router-dom 和 react-router-redux 有什么区别？

【发布时间】：2017-08-28 08:30:40

【问题描述】：

我正在 react-application 中实现路由。我对 react-router 4.0 相对于 react-router-redux 的优势感到困惑。我也对 react-router-dom 感到困惑。

react-router-redux、react-router 4.0 和 react-router-dom 各有什么优缺点？

【参考方案1】：

react-router v4 是基础，构建块。提供用于创建路由解决方案的 API。

react-router-dom 是react-router 的包装。它应该在浏览器中运行。

react-router-redux 提供所谓的“受控路由器”，绑定到redux 商店。状态更改（导航）可以通过调度redux 动作以及点击链接来控制。

最好的选择是从react-router-dom 开始（默认情况下会为您拉入react-router）。

【讨论】：

现在我的困惑是为什么我应该使用 react-redux-router，因为通过使用 react router 4.0，我们可以使用 this.props.history 访问位置和历史信息。 push('/') 什么场景下强制使用react-redux-router？

您绝对不必使用react-router-redux。这是完全可选的。即使使用redux 进行状态管理，也不必使用它。

是的，我们正在使用 redux 进行状态管理，那么我认为不需要使用 react-redux-router。谢谢

但我认为如果我们不使用本地存储，react-redux-router 将有助于维护页面刷新中的状态。我说的对吗？

根据我的经验，react-router-redux“仅”用于管理位置（推送、返回）作为对操作的响应。无论如何，您都可以读取位置状态。

【参考方案2】：

非常非常简单的解释！！！

无需直接使用react-router。 react-router-dom 用于“Web 应用程序”，react-router-native 用于“react 本机移动应用程序”。 react-router-dom & react-router-native 在核心使用react-router。 react-router-dom 完美在 Redux 上运行良好，不需要 react-router-redux。（由 Dan abramov 确认 - 的创建者还原） react-router-redux 的额外好处是您可以让您的路由器与应用程序状态保持同步。 简而言之 - 历史记录 + 存储 (redux) → react-router-redux

【参考方案3】：

react-router 导出共享的核心模块，用于原生 (react-router-native) 和 Web 开发 (react-router-dom) 使用react-router-dom 进行网络开发 使用 react-router-native 进行原生开发 使用react-router-redux 集成react-redux 和react-router，例如，通过store.dispatch() 导航

【讨论】：

为什么要使用 react-redux-router 是为了维护 store 中的路由状态，而在 react-router 4.0 中我们可以将路由信息作为 props 访问，那么 react 的需要是什么？ -redux-router?

在我看来没有真正的需要，我不使用它。光是路由器就足够强大了。

这就是我的困惑，因为单独的路由器很强大，所以如果使用 redux 进行状态管理，react-redux-router 就没有那么有用了。谢谢