React-Router 是 React 中常用的路由库，Redux 是 React 中常用的状态管理库，两者结合起来可以使得应用程序更加易于维护和扩展。本文将介绍如何在 React 应用中使用 React-Router 和 Redux，包括 Redux-Router 和 React-Router-Redux 两种使用方式，并通过示例代码讲解其具体应用。
Redux-Router 的使用
Redux-Router 是将 React-Router 和 Redux 结合起来的一个库。它实现了一个 Redux middleware，即 react-router-redux 中间件，用于将路由状态同步到 Redux store 中，并在 store 中维护路由状态。具体使用步骤如下：
安装
使用 npm 安装 redux、react-router、react-router-redux 三个库：
npm install --save redux react-router react-router-redux
添加 Redux middleware
在创建 Redux store 时，将 react-router-redux 中间件添加到 middleware 队列中。示例代码如下：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - ---------------- - ---- --------------------- ------ - -------------- - ---- --------------- ------ ----------- ---- ------------- ----- ---------- - --------------------------------- ----- ----- - ------------ ----------------- --------------- -------- ------------- --- --------------------------- --
注意，在使用 react-router-redux 中间件之前，需要先使用 react-router 中间件（即 browserHistory），否则会报错。
在 React 组件中使用 Redux 与 React-Router
在组件中使用 Redux 和 React-Router，需要使用react-redux中的connect()方法将组件与 Redux store 相连接，以便将 store 中的状态作为组件的 props 传递下来。另外，还需使用withRouter()方法将路由信息作为 props 传递给组件。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- ---------------
----- ------ - -- -------- -- -- -
-----
----------------------------
------
--
----- --------------- - ----- -- --
------- ------------
---
------ ------- ---------------------------------------------在组件中触发路由变化
使用react-router-redux提供的push()、replace()、go()等方法可以在组件中直接触发路由变化，从而改变 store 中的路由状态。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---- - ---- ---------------------
----- ----------- - -- -- -
---------------
--
----- ---- - -- -------- -- -- -
-----
---------- -----------
------- ------------------------ -- --------------
------
--
------ ------- ----------------React-Router-Redux 的使用
React-Router-Redux 是将 React-Router 和 Redux 同时封装起来的一个库。它不仅实现了 Redux 的路由同步功能，还提供了一些方便的 API，比如routerActions、syncHistoryWithStore等。使用步骤如下：
安装
使用 npm 安装 react-router-redux、redux、react-router 和 history 三个库：
npm install --save react-router-redux redux react-router history
创建 Redux store
创建 Redux store 时，使用routerReducer替代 react-router-redux 的中间件，并使用syncHistoryWithStore()方法将 history 对象与 Redux store 进行同步绑定。示例代码如下：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - -------------- ----------------- -------------------- - ---- --------------------- ------ - -------------- - ---- --------------- ------ ----------- ---- ------------- ----- ---------- - --------------------------------- ----- ----- - ------------ ----------------- --------------- -------- ------------- --- --------------------------- -- ----- ------- - ------------------------------------ ------- ------ ------- - ------ ------- --
在 React 组件中使用 React-Router-Redux
React-Router-Redux 提供了routerActions对象，包含了push()、replace()、go()等方法，可以用来在组件中触发路由变化。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------- - ---- ---------------------
----- ----------- - -- -- -
-----------------------------
--
----- ---- - -- -- -
-----
---------- -----------
------- ------------------------ -- --------------
------
--
------ ------- ----------------如上，routerActions.push('/about')方法用于跳转到“/about”页面。
总结
React-Router 和 Redux 可以相互结合，共同构建一个更加灵活、易于维护和扩展的 React 应用程序。使用 Redux-Router 和 React-Router-Redux 两种方法可以实现 Redux 和 React-Router 的结合，其中 Redux-Router 较为简单，React-Router-Redux 则更加方便。在实际项目中，应根据自己的需求选择合适的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b0170968c7c53b0d5c581