React-Router-Redux 是 React Router 和 Redux 的结合，能够方便地将路由信息与 Redux 状态管理结合起来，简化前端开发中的状态管理与路由控制。
在这篇文章中，我们将学习如何在 React 中使用 React-Router-Redux，并提供示例代码及详细的指导说明。
安装 React-Router-Redux
要使用 React-Router-Redux，我们需要先安装它。在终端中执行以下命令：
--- ------- ------------------
配置 Redux Store
在使用 React-Router-Redux 前，我们需要先创建一个 Redux store。需要确保在创建 store 的时候使用了 Redux 的 applyMiddleware 方法，并注入了 thunk 和 routerMiddleware。
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ - -------------------- - ---- ---------- ------ - ---------------- - ---- --------------------- ------ -------- ---- ------------- ----- ------- - ----------------------- -- -- ------- -- ----- --------- - -------------------------- -- -- ------ ---------- ----- ----- - --------------------- ---------------------- ------------
在创建 store 的时候，我们使用了 createBrowserHistory 方法创建了一个 history 对象，并使用 routerMiddleware 将它注入到 applyMiddleware 中。
配置 React-Router
在创建 Redux store 后，我们需要配置 React-Router。在 index.js 文件中，我们需要将 React-Router 的 Router 组件包裹整个应用，并将 Redux store 通过属性值传入其中。
------ - ------ - ---- -------------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
------- ------------------
---- --
---------
------------
---------------------------------在应用中使用 Router 组件时，需要将创建的 history 对象作为属性值传入。此处我们也利用了 Provider 组件将 Redux store 传入整个应用中。
配置 Reducer
在配置完 Redux store 和 React-Router 后，我们还需要创建一些 reducer，来管理路由状态。我们可以通过使用 combineReducers 方法，将 react-router-redux 中提供的 routerReducer 和其他 reducer 结合起来。
------ - --------------- - ---- -------- ------ - ------------- - ---- --------------------- ------ ------------ ---- ----------------- ----- -------- - ----------------- ------- -------------- ------ ------------ --- ------ ------- ---------
在 combineReducers 中，我们将 routerReducer 和其他 todosReducer 结合起来，最后作为 rootReducer 导出。
在组件中使用 React-Router-Redux
使用 React-Router-Redux 的最后一步，是在组件中使用它提供的 connect 方法，将组件与 Redux store 的状态和 dispatch 方法相连。
我们需要在组件中引入 connect、push 和 goBack 三个方法。其中，push 方法可以用于在组件中跳转路由，而 goBack 方法则可以用来返回上一个路由。
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----- ------ - ---- ---------------------
----- ----------- ------- --------------- -
----------- - -- -- -
----- - -------- - - -----------
---------------------------- -- --- ---------
-
------------ - -- -- -
----- - -------- - - -----------
------------------- -- -------
-
-------- -
------ -
-----
------- ------------------------------ ------------------
------- --------------------------------------------
------
--
-
-
------ ------- -----------------------在组件中，我们可以通过 dispatch(push(location)) 实现路由跳转，并通过 dispatch(goBack()) 实现返回上一个路由。
示例代码
下面是一个简单的示例代码，包括了 React-Router-Redux 的使用、路由跳转和返回上一个路由的实现代码。
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----- ------ - ---- ---------------------
----- ---- ------- --------------- -
----------- - -- -- -
----- - -------- - - -----------
-------------------------
-
------------ - -- -- -
----- - -------- - - -----------
-------------------
-
-------- -
------ -
--
-------- ---------
------- ------------------------------ ----- -----------
------- --------------------------------------------
---
--
-
-
------ ------- ----------------总结
React-Router-Redux 结合了 React Router 和 Redux 的功能，可以方便地管理前端应用的路由和状态。需要注意在创建 Redux store 时，要加入 routerMiddleware，并在使用 Router 组件时，要将创建的 history 对象作为属性值进行传递。最后，在组件中使用 connect 方法来与 Redux store 相连，通过 dispatch 方法进行路由控制。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ad5c7e48841e98949846db