React Router Redux 是一个方便的工具，用于将 React Router 和 Redux 集成在一起。它允许您将路由状态存储在 Redux Store 中，并且可以与 React Router 一起使用。
安装
首先，在您的项目中安装 react-router-redux：
npm install --save react-router-redux
配置
要将 React Router Redux 集成到您的项目中，您需要做两件事：
- 将
react-router-redux的 reducer 添加到您的 Redux store 中。 - 使用
ConnectedRouter替换标准的Router组件。
下面是一个示例 store.js 文件，其中包含了如何添加 react-router-redux 到您的 Redux store 中：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------- - ---- ---------------------
----- ----------- - -----------------
-------- -------------
---
------ ------- -------- ---------------------------- -
------ ------------
------------
------------
--
-接下来，您需要使用 ConnectedRouter 组件替换标准的 Router 组件。下面是一个示例 App.js 文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------------
------ - --------------- - ---- ---------------------
------ --------------- - ------- - ---- ----------
------ -------- ---- ---------------
------ --------- ---- ----------------
----- ----- - -----------------
-------- ----- -
------ -
---------------- ------------------
-----
------ ----- -------- -------------------- --
------ ------------- --------------------- --
------
------------------
--
-
------ ------- ----上面的示例中，我们使用 ConnectedRouter 替换了标准的 Router 组件，并传递了一个 history 对象作为属性。要创建 history 对象，请确保您已经安装了 history npm 包。
使用
现在，您可以将路由状态存储在 Redux Store 中了！下面是一些示例代码，演示如何从 Redux Store 中读取和更新路由状态：
import { push } from 'react-router-redux';
// 导航到新路径
store.dispatch(push('/about'));
// 获取当前路径
const currentPath = store.getState().routing.location.pathname;结论
React Router Redux 是一个非常有用的工具，它允许您将路由状态存储在 Redux Store 中，并且可以与 React Router 一起使用。通过遵循上面的配置和使用指南，您可以轻松地在您的项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32661
