React-Router 是 React 社区中最流行的路由库之一，它提供了一种方便的方式来为 React 应用添加路由功能。Redux 是另一个流行的 JavaScript 库，它被广泛用于管理 React 应用中的状态。Redux 能够让我们轻松地跨组件共享状态，但是在前端应用中，路由与状态管理通常扮演了不同的角色。本文将探讨如何在 React-Router V4 版本中与 Redux 配合使用。
安装
首先，我们需要安装 React-Router 和 Redux。可以使用 npm 安装它们：
npm install react-router-dom redux react-redux
上述命令安装了三个包：
react-router-dom：React-Router 的 DOM 版本，提供了在浏览器中使用 React-Router 的 API；redux：Redux 的核心库；react-redux：Redux 的官方 React 绑定库。
搭建环境
在我们开始将 React-Router 和 Redux 集成到我们的应用中之前，首先需要搭建好环境。通常情况下，我们需要在 Redux 应用的根组件中创建 Redux Store。在这个例子中，我们将使用一个名为 store.js 的文件来管理我们的 Redux Store。
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;上述代码中，我们使用 createStore 方法创建了 Redux Store，然后将其导出。这个 store.js 文件应该被引入并在应用的根组件中使用。
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的例子中，我们使用了 Provider 组件来将 Redux Store 传递给子组件。这个组件是 react-redux 库中提供的。
使用 withRouter
一旦我们完成了 Redux Store 的配置，我们可以开始在 React-Router 中使用它。在 React-Router V4 版本中，使用 withRouter 高阶组件来访问 React-Router 的路由信息。
首先，在我们开始使用 withRouter 时，我们需要在路由相关组件中引入它：
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
// ...然后，我们需要将组件包裹在 withRouter 高阶组件中：
export default withRouter(connect(mapStateToProps)(MyComponent));
在上述代码中，我们使用了 withRouter 和 connect 函数将我们的组件与 Redux Store 和 React-Router 的路由信息进行了连接。这样我们就能够使用路由信息和 Redux Store 中的状态进行交互了。
访问路由信息
现在我们已经在我们的组件中使用了 withRouter，我们可以通过 this.props 属性访问 React-Router 的路由信息。下面是一些常用的路由信息：
location：包含当前应用程序位置的信息；match：包含路由匹配信息的对象；history：包含浏览历史的方法。
例如，我们可以使用以下代码获取当前路由的路径名：
const { pathname } = this.props.location;我们也可以获取当前路由的参数：
const { id } = this.props.match.params;使用 Redux Store
一旦我们获取了路由信息，我们就可以开始将其与 Redux Store 中的状态进行交互了。我们可以使用 connect 函数将我们的组件与 Redux Store 中的状态进行链接。例如：
const mapStateToProps = state => ({
todos: state.todos,
});
export default withRouter(connect(mapStateToProps)(MyComponent));在上述代码中，我们使用 connect 函数将我们的 Redux Store 状态中的 todos 属性传递给我们的组件中。这样我们就可以使用 this.props.todos 属性在我们的组件中获取它了。
示例代码
下面是一个完整的代码示例，它展示了如何在 React-Router V4 中使用 Redux：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- -------------------
----- ----------- ------- --------- -
----------- - -- -- -
--------------------------------------
--
-------- -
----- - ----- - - -----------
------ -
-----
----
----------------- ------ -- -
--- -----------------------
---
-----
------- ----------------------------- -- --- --------------
------
--
-
-
----- --------------- - ----- -- --
------ ------------
---
------ ------- --------------------------------------------------在上述示例中，我们在组件中使用了 withRouter 和 connect 函数。它还包含了一个点击按钮的事件处理程序，它使用 React-Router 中的 history 对象来导航到一个新的路由。这个组件还使用了从 Redux Store 中获取的状态来渲染一些元素。
总结
在本文中，我们讨论了如何在 React-Router V4 版本中与 Redux 配合使用。可以通过使用 withRouter 高阶组件和 Redux 来轻松地访问路由信息和共享状态。上述例子中展示了如何在组件中使用 this.props 属性访问路由信息，以及如何使用 Redux Store 中的状态来管理组件的状态。希望这篇文章能够帮助你更好地理解 React-Router 和 Redux 的集成方式，并在你的应用中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646827c9968c7c53b0857f4b