React Router 是 React 中常用的路由库，它可以帮助我们在应用中实现页面之间的跳转。然而，如果我们需要将路由状态保存在 Redux 中，就需要配合使用 React Router 4 和 Redux。
安装
首先，我们需要安装 React Router 4 和 Redux。可以使用以下命令进行安装：
--- ------- ---------------- ----- ----------- ------
配置路由
在使用 React Router 4 时，我们需要在应用的入口文件中配置路由。我们可以创建一个名为 App.js 的文件，并在其中导入 React Router 4 相关的组件和页面组件。下面是一个简单的示例：
------ ----- ---- --------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ ---- ---- --------------------
------ ----- ---- ---------------------
----- --- - -- -- -
--------- --------------
--------
-----
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
------
---------
-----------
--
------ ------- ----在上面的示例中，我们使用 BrowserRouter 组件作为路由容器，并在其中定义了两个路由规则，分别匹配根路径和 /about 路径。对于每个路由规则，我们都指定了相应的页面组件。
配置 Redux
接下来，我们需要配置 Redux。我们可以创建一个名为 store.js 的文件，并在其中定义 Redux 的 store。下面是一个简单的示例：
------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - ------------------------- ------ ------- ------
在上面的示例中，我们使用 createStore 函数创建了一个 Redux 的 store，并传入了一个 rootReducer。这个 rootReducer 是一个函数，它用于将多个 reducer 合并为一个 reducer。我们可以在 reducers.js 文件中定义多个 reducer，并将它们合并为一个 rootReducer，如下所示：
------ - --------------- - ---- -------- ------ - ------------- - ---- --------------------- ----- ----------- - ----------------- -------- -------------- --- ------ ------- ------------
在上面的示例中，我们使用 combineReducers 函数将 routerReducer 合并到了 rootReducer 中。这样，我们就可以将路由状态保存在 Redux 中了。
使用路由和 Redux
现在，我们已经配置好了路由和 Redux，接下来就可以在页面中使用它们了。我们可以在页面组件中导入 react-router-dom 和 react-redux 相关的组件，并使用它们来获取路由状态和 dispatch action。下面是一个简单的示例：
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---- - ---- ---------------------
----- ---- - -- ---- -- -- -
-----
-------------
------- ----------- -- ------------------ -- --------------
------
--
------ ------- ------------- - ---- ---------在上面的示例中，我们使用 connect 函数将组件连接到 Redux，并将 push action 作为 props 传递给组件。当用户点击按钮时，我们就可以使用 push action 来跳转到 /about 路径了。
总结
在本文中，我们介绍了如何配合使用 React Router 4 和 Redux。首先，我们需要在应用的入口文件中配置路由，并在其中定义路由规则和页面组件。接着，我们需要在 store.js 文件中定义 Redux 的 store，并将多个 reducer 合并为一个 rootReducer。最后，我们可以在页面组件中使用 react-router-dom 和 react-redux 相关的组件来获取路由状态和 dispatch action。
完整示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65698f3fd2f5e1655d22009d