介绍
hydux-react-router 是一个基于 Hydux 和 React Router 的状态管理库，通过它可以简化 React Router 中的状态管理，并同时提供了一些方便的工具和组件，如可撤销的路由跳转等。
在使用 hydux-react-router 之前，需要先熟悉 Hydux 和 React Router 的基础知识。
安装
$ npm install hydux-react-router
基础用法
首先，我们需要在 Hydux 中启用 hydux-react-router：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - ------------ - ---- --------------------
----- ------ - ---------------------
----- ------------ - -
------- -------------------
-
----- ------- - -
------- --------------
-
----- ---- - ------- -------- -- -
------ -
------- ------------------
--------
------ ----- -------- ---------- -- ----- --
------ ------------- ---------- -- ------- --
------ ------------- ---------- -- ------ ----------------- --- --
------ ----------- ---------- -- ---- ---- --
--------- --------- --
---------
---------
-
-
------ ------- ----------- ------------- -------- ---- --接着，在应用中使用 Hydux 的 router 重写路由跳转的方法：
-- -------------------- ---- -------
------ - ----------- ---------- - ---- --------------------
----- ----- - -- ------- -- -- -
----- ------------ - -- -- -
---------------------
-
----- --------------- - -- -- -
--------------------
-
----- ------------ - -------- -- -
---------------------------------------
-
------ -
-----
------- ----------------------------------
------- -------------------------------------
----
--- ----------- -- ------------------- ------
--- ----------- -- ------------------- ------
--- ----------- -- ------------------- ------
-----
------
-
-通过使用 routerPush 和 routerBack 方法，我们可以更加方便地实现路由跳转，例如：
import { routerPush } from 'hydux-react-router'
const handleClick = () => {
routerPush('/about')
}进阶用法
发送异步请求
当应用需要向服务器发起异步请求时，我们通常需要展示一个 loading 状态，直到请求完成后再渲染具体的内容。如果我们每个组件都手动去管理 loading 状态，代码量将会非常庞大而且难以维护。
针对这种情况，我们可以使用 hydux-react-router 提供的 withAsync 和 withLoading 组合函数。例如：
-- -------------------- ---- -------
------ - ---------- ----------- - ---- --------------------
----- --------- - -------- -- -
------ -------------------------------------- -- -----------
-
----- ---- - -- ------- ---- -- -- -
-- ------- ------ ----
------ -
-----
--------------------
-----------------
------
-
-
----- ------- - ----------
-----------
----- -------
------- ------- - ---- ---------- -- -- -
----------------
------ --------------------------------- -- -
-----------------
---------
--
-
---
-------------- ---- -- -- ------
-
----- ------------- - -------------通过将 withAsync 和 withLoading 两个组合函数应用在组件上，我们可以将异步请求和 loading 状态管理起来，以应对复杂的业务场景。
定制路由逻辑
在实际开发中，我们可能需要定制路由跳转的行为，例如在路由发生变化时自动关闭弹窗等。此时，我们可以通过 createRouter 带入自定义的路由监听器：
const routerListener = (prev, next) => {
if (prev.location.pathname !== next.location.pathname) {
// 关闭弹窗
actions.closeModal()
}
}
const router = createRouter(history, { listener: routerListener })结语
通过我们以上的介绍，相信您已经对 hydux-react-router 的使用有了一定的了解。在实际项目中，我们建议您深入阅读 Hydux 和 React Router 的官方文档，并结合本文提供的示例代码进行实践，从而更好地掌握这一技术栈实现复杂状态管理的能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d1681e8991b448e6e15