npm 包 @jkillian/redux-little-router 使用教程

阅读时长 9 分钟读完

概述

在前端开发中,路由是不可或缺的一部分,它们可以让用户快速地在应用程序中切换不同的视图,同时保持应用程序的状态存在。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 组件、routerActionspush 操作,并定义了一个 handleButtonClick 回调函数,以便在用户单击“About”按钮时调用。在返回的 JSX 中,我们使用条件渲染来仅在路径名称为“/”时呈现特定内容。

创建应用程序主组件

我们的应用程序主组件将成为我们的路由组件。当路由器检测到 Navigation 组件的路径名称时,它将自动将此组件呈现在应用程序的根上。当应用程序跳转到“/about”时,About 组件将自动呈现在应用程序的根上。我们将创建一个名为 App 的主要组件,该组件将包含我们的应用程序路由器和应用程序主要内容。在 App 组件中,我们可以创建我们的应用程序主组件如下所示:

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- - ---- --------------------------------
------ - ------------- - ---- --------------------------------

------ ---------- ---- ---------------
------ ----- ---- ----------

----- ------ - -
  ---- -
    ---------- ----------
  --
  --------- -
    ---------- -----
  -
--

----- - -------- ----------- -------- - - ------------------ ------ ---
----- ----- - -------------------- ----------

----- --- - ----------------------- ------ -- -- -
  -----
    ------- --
  ------
---

------ ------- ----

在此代码中,我们首先从 @jkillian/redux-little-router 模块中导入 routerForBrowserconnectRoutes。我们还从应用程序的外部导入我们的两个应用程序组件 NavigationAbout。接下来,我们配置我们的路由状态,并使用 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

纠错
反馈