前言
在 Web 开发中，路由是必不可少的一部分。随着前端技术的发展，单页应用（Single Page Application，简称 SPA）越来越流行，这也促进了前端路由的发展。而 Redux 状态管理库在 React 生态中的地位愈发重要。Redux 和路由的结合，也是必不可少的。redux-simple-router 是一个非常实用的 Redux 路由管理库，本文将详细介绍它的使用方法。
安装
使用 npm 进行安装：
npm install --save redux-simple-router
配置
使用 React Router
redux-simple-router 只负责管理应用的路由状态，而不是路由实现本身。因此，我们需要使用其他库或框架来实现路由。下面的示例将以 React Router 为例：
-- -------------------- ---- -------
------ - ------- ------ ----------- -------------- - ---- --------------
------ - -------------------- - ---- ---------------------
------ ----- ---- ---------
----- ------- - ------------------------------------ ------
----------------
--------- --------------
------- ------------------
------ -------- ----------------
----------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
--------
---------
------------
-------------------------------
-可以看到，syncHistoryWithStore 方法传递了两个参数：一个是 react-router 的 history 对象，一个是 Redux store。这样，redux-simple-router 就可以监听 location 变化，将更新后的 location 值更新到 Redux store 中了。
定义 Redux Reducer
我们需要定义一个 Redux Reducer，用于处理 redux-simple-router 的 action。这个 Reducer 必须命名为 routerReducer，而且要与其他 Reducer 一样加入到 Redux store 中。注意，我们需要通过 combineReducers 方法将 routerReducer 合并到 rootReducer 中。
-- -------------------- ---- ------- ------ - --------------- - ---- ------- ------ - ------------- - ---- --------------------- ------ ----- ---- --------- ------ ---------------- ---- -------------------- ----- ----------- - ----------------- ------ ----------------- -------- ------------- -- ------ ------- -----------
这样，Redux store 就可以正确地处理 redux-simple-router 的 action 了。
发起路由跳转
redux-simple-router 允许我们通过 Redux action 发起路由跳转。下面是一个示例代码：
import { push } from 'redux-simple-router'
// 跳转到 /about 页面
store.dispatch(push('/about'))总结
redux-simple-router 是一个非常方便的 Redux 路由管理库，它与 React Router 结合使用，可以帮助我们更好地管理应用的状态。本文详细介绍了 redux-simple-router 的使用方法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b6d