redux-json-router 是一个基于 redux 的 router 库，它可以让你在应用中快速实现路由功能。该库支持基于 json 的路由配置，并且可以自定义 middleware。
安装
首先，使用 npm 安装 redux-json-router：
npm install redux-json-router --save
使用方法
创建路由
创建路由配置文件 routes.json：
-- -------------------- ---- -------
-
--------- -
-
------- ----
------------ ------
--
-
------- ---------
------------ -------
--
-
------- -----------------
------------ ------
-
-
-其中，routes 是一个数组，每个元素表示一个路由。每个路由对象包含 path 和 component 两个属性，分别表示路由路径和对应的组件。
创建 reducer
创建路由 reducer 文件 reducer.js：
import { routerReducer } from 'redux-json-router';
export default combineReducers({
router: routerReducer
});redux-json-router 提供了一个 routerReducer，用于在 redux 中存储当前路由信息。
创建 store
创建 store 文件 store.js：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ --------------- ---- -------------
------ - ---------------- - ---- --------------------
------ ----------- ---- ------------
----- ----- - ------------
------------
----------------
----------------
----------------
-
-
------ ------- ------redux-json-router 提供了一个 routerMiddleware，可以拦截路由 action，并修改 store 中的路由信息。
创建路由组件
在组件中使用 Link 和 Route 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- - ---- --------------------
----- ---- - -- -- -------------
----- ----- - -- -- --------------
----- ---- - -- ----- -- -- -------- --------------------------
----- --- - -- -- -
-----
-----
----
--------- -----------------------
--------- -----------------------------
--------- -------------------- ---------------
-----
------
------ -------- ---------------- --
------ ------------- ----------------- --
------ --------------------- ---------------- --
------
--
------ ------- ----在上面的代码中，Link 组件用于生成指向不同路由的链接，Route 组件用于渲染对应路由的组件。
自定义 middleware
redux-json-router 在路由切换的过程中，提供了四个 middleware 钩子，分别是 onBeforeRouteChange、onRouteChangeSuccess、onRouteChangeCancelled 和 onRouteChangeError，可以进行对应的中间件拦截，例如：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ - ---------------- - ---- --------------------
----- ---------------- - ----- -- ---- -- ------ -- -
------ ------------- -
---- -----------------------
-- ------------
------
---- -------------------------
-- ------------
------
---- ---------------------
-- ------------
------
-
-------------
-
----- ----- - ------------
------------
----------------
-----------------
----------------
-
--示例代码
一个完整的基于 redux-json-router 的示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- - ---- --------------------
------ - ------------ ---------------- --------------- - ---- --------
------ - ----------------- -------------- ------------- - ---- --------------------
------ --------------- ---- --------------
----- ------ - -
------- -
-
----- ----
---------- ------
--
-
----- ---------
---------- -------
--
-
----- -----------------
---------- ------
-
-
--
----- ---- - -- -- -------------
----- ----- - -- -- --------------
----- ---- - -- ----- -- -- -------- --------------------------
----- --- - -- -- -
-----
-----
----
--------- -----------------------
--------- -----------------------------
--------- -------------------- ---------------
-----
------
------ -------- ---------------- --
------ ------------- ----------------- --
------ --------------------- ---------------- --
------
--
----- ----------- - -----------------
------- -------------
---
----- ----- - ------------
------------
----------------
----------------
----------------
-
--
-------------------------------------------
------ ------- ----总结
使用 redux-json-router，可以快速实现前端应用中的路由功能，并支持自定义 middleware。同时，该库还提供了 Route 和 Link 等组件，方便开发者进行路由相关的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005619881e8991b448df53b