简介
@boxfoot/redux-router 是一个基于 React 和 Redux 的路由管理库，它提供了一种使用 React 组件来管理路由的方式，能够方便地实现页面跳转和 URL 的更新。它不仅可以用于普通的浏览器 web 应用，还可以用于 React Native 应用的路由管理。
安装
使用 npm 进行安装：
npm install @boxfoot/redux-router --save
快速开始
创建路由
@boxfoot/redux-router 的核心是 Router 组件，我们可以在应用的入口处使用它来创建路由的映射关系：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ - ------- ----- - ---- ------------------------
------ ----------- ---- -------------
------ --- ---- -------------------
----- ----- - -------------------------
-------
--------- --------------
--------
------ -------- --------------- --
---------
------------
-------------------------------
--上面的代码中，我们使用了 Router 和 Route 组件，其中 Router 组件是路由的容器，Route 组件用于定义路由规则。在这个例子中，我们定义了根路由 /，它的对应组件是 App。
定义路由组件
为了定义路由组件，我们需要引入 withRouter 高阶组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ------------------------
----- ------------- - -- ------ -- -- -
-----
-------- --------------
------------ ------------------------------
------
--
------ ------- --------------------------在这个例子中，我们将 SomeComponent 组件通过 withRouter 包装后导出。这样，SomeComponent 组件就能够通过 props 获取到 router 对象，从而获取当前路由信息。
跳转路由
我们可以通过 Link 组件来在应用内部进行路由跳转：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ------------------------
----- ------------------ - -- -- -
-----
-------- ----- --------------
----- ------------------- -- ----------------
------
--
------ ------- -------------------在这个例子中，我们使用 Link 组件来跳转到 /some-route 路由。
进阶使用
嵌套路由
@boxfoot/redux-router 支持嵌套路由，我们可以在 Route 组件的 children 中再嵌套 Route 组件来实现：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ------------------------
------ --------------- ---- --------------------
------ -------------- ---- -------------------
----- ------ - -
-
----- ----------
---------- ----------------
--------- -
-
----- ---------
---------- ---------------
--
--
--
--
----- --- - -- -- -
-----
------------
------ --------------- --
------
--
------ ------- ----在这个例子中，我们定义了一个 ParentComponent 组件和一个 ChildComponent 组件，使用 routes 数组来定义嵌套路由映射关系。ParentComponent 是根据 /parent 路由渲染的，ChildComponent 是在 ParentComponent 中的子路由 /child 渲染的。
动态路由
@boxfoot/redux-router 支持动态路由，我们可以在 Route 组件的 path 中使用冒号（:）来定义动态参数，然后在子组件 props 中通过 params 属性来获取动态参数的值。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ------------------------
------ ------------- ---- ------------------
----- --- - -- -- -
-----
------------
------ -------------------- ------------------------- --
------
--
------ ------- ----在这个例子中，我们定义了一个 UserComponent 组件，使用 /user/:userId 路由来匹配动态参数 userId。在 UserComponent 组件中，我们可以通过 props.params.userId 来获取动态参数的值。
路由守卫
@boxfoot/redux-router 支持路由守卫，在路由匹配时会先执行路由守卫，我们可以在路由守卫中进行一些判断并决定是否渲染组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- ------------------------
------ -------------- ---- -------------------
------ ------------- ---- ------------------
----- ----------- - ----------- -------- -- -
-- -------------------- -
---------
--------- ---------
------ - ------------- --------------------------- --
---
-
--
----- --- - -- -- -
--------
------ ------------- -------------------------- --
------ -------- ------------------------- --------------------- --
---------
--在这个例子中，我们定义了一个 requireAuth 路由守卫函数，用于判断用户是否登录，如果未登录则重定向到 /login 路由。在 HomeCompoment 组件中通过 onEnter 属性来指定路由守卫。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566a681e8991b448e2dc3