概述
在前端开发中，路由是不可或缺的一部分，它们可以让用户快速地在应用程序中切换不同的视图，同时保持应用程序的状态存在。redux-little-router 是一个轻量级的、类型友好的路由管理库，它通过 Redux store 中的状态来实现路由的管理。它支持浏览器 DOM、React Native、以及 Node.js 等不同平台的应用程序开发，并且可以集成到任何 Redux 应用程序中。
安装和下载
要使用 redux-little-router，需要使用 npm 来安装该包。如果在项目中还未使用 npm，请首先安装 npm 包管理器。在命令行工具中执行下面的命令即可安装 redux-little-router：
--- ------- -----------------------------
使用示例
在本节中，我们将演示如何在 React 应用程序中使用 redux-little-router。我们将创建一个简单的 React 应用程序，该应用程序由两个组件组成：主应用程序组件和导航组件。我们将使用 redux-little-router 来管理导航组件的路由，并将主应用程序组件嵌套在导航路由之下。
配置 Redux Store
首先，我们需要在 Redux store 中配置路由状态。我们将使用 redux-little-router 提供的 routerForBrowser 方法来配置路由状态。我们还将使用 Redux Thunk 中间件和 React Redux 提供的 Provider 组件来创建 Redux store。在项目的入口文件中，我们可以配置 Redux store 如下所示：
------ - -------- ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ - ---------------- ------------ ------- - ---- --------
------ - ---------------- - ---- --------------------------------
------ ----- ---- --------------
------ ----------- ---- -------------
------ ------ ---- -----------
----- - -------- ----------- -------- - - ------------------ ------ ---
----- ----- - ------------
------------
-------------------------------------------- --------
--
----------------
--------- --------------
---- --
------------
-------------------------------
--在此代码中，我们首先从 redux-little-router 中导入 routerForBrowser 方法，并将其与我们的应用程序路由配置（在 routes.js 文件中定义）一起作为参数传递。我们还导入了 redux-thunk 中间件，并将其与 routerForBrowser 中间件组合使用。最后，我们将 Redux store 作为 Provider 的属性传递给 React DOM 渲染函数。
配置应用程序路由表
接下来，我们需要在 routes.js 文件中配置我们的应用程序路由表。路由表应该包含一个完整的 URL 和与之关联的应用程序组件。我们将为我们的示例应用程序定义两个路由：一个字符串路径为 /，与导航组件关联；另一个字符串路径为 /about，与 About 组件关联。
------ ---------- ---- ---------------
------ ----- ---- ----------
----- ------ - -
---- -
---------- ----------
--
--------- -
---------- -----
-
--
------ ------- -------创建应用程序路由
现在，我们需要创建我们的应用程序路由。为此，我们将使用 connectRoutes 方法，并从 Redux store 中导入创建的路由状态。这将为我们创建一个带有 Router 组件的路由器 HOC。我们还将使用 routerActions 与应用程序组件一起导入，以便触发和处理路由器操作。在 Navigation 组件中，我们可以创建我们的应用程序路由如下所示：
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
------ - ---- - ---- --------------------------------
------ - ---- - ---- --------------------------------
------ - ------------- - ---- --------------------------------
----- ---------- - -- ------- -------- -- -- -
----- ----------------- - ------- -- -
-----------------------
------------------------------ ----------------
--
------ -
-----
-----
----
----
----- --------------------
-----
----
----- --------------------------
-----
-----
------
- -------- --- --- -- -
-----
-------------
------- ------------------------------ -- ---------------
------
--
------
--
--
-------------------- - -
------- ----------------------------
--------- ---------------------------
--
----- --------------- - -- ------ -- -- --
-------
--------- ---------------
---
------ ------- -------------------------------------在此代码中，我们首先从 react-redux 中导入 connect 方法，并使用 mapStateToProps 函数将 router 状态对象和当前路径名称 pathname 提取为组件的 props。我们还从 @jkillian/redux-little-router 模块中导入了 Link 组件、routerActions 和 push 操作，并定义了一个 handleButtonClick 回调函数，以便在用户单击“About”按钮时调用。在返回的 JSX 中，我们使用条件渲染来仅在路径名称为“/”时呈现特定内容。
创建应用程序主组件
我们的应用程序主组件将成为我们的路由组件。当路由器检测到 Navigation 组件的路径名称时，它将自动将此组件呈现在应用程序的根上。当应用程序跳转到“/about”时，About 组件将自动呈现在应用程序的根上。我们将创建一个名为 App 的主要组件，该组件将包含我们的应用程序路由器和应用程序主要内容。在 App 组件中，我们可以创建我们的应用程序主组件如下所示：
------ ----- ---- --------
------ - ---------------- - ---- --------------------------------
------ - ------------- - ---- --------------------------------
------ ---------- ---- ---------------
------ ----- ---- ----------
----- ------ - -
---- -
---------- ----------
--
--------- -
---------- -----
-
--
----- - -------- ----------- -------- - - ------------------ ------ ---
----- ----- - -------------------- ----------
----- --- - ----------------------- ------ -- -- -
-----
------- --
------
---
------ ------- ----在此代码中，我们首先从 @jkillian/redux-little-router 模块中导入 routerForBrowser 和 connectRoutes。我们还从应用程序的外部导入我们的两个应用程序组件 Navigation 和 About。接下来，我们配置我们的路由状态，并使用 createStore 创建一个带有路由状态中间件和增强器的 Redux store。最后，我们使用 connectRoutes HOC 和 store 参数来创建一个带有 Router 组件的 App 组件，并将其渲染到 React DOM 中。
总结
在上面的例子中，我们展示了如何在 React 应用程序中使用 @jkillian/redux-little-router。我们讨论了如何在应用程序中配置 Redux store、应用程序路由表、应用程序路由器和应用程序组件。我们还探讨了如何使用路由器提供的 Link 组件来在应用程序中进行导航，并演示了如何在应用程序中响应路由器操作。我们希望这篇文章对于那些需要管理路由的前端开发人员是有益的，并且为学习 redux-little-router 提供了一个良好的起点。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005731581e8991b448e9423