npm包 @jsbit/react-redux-router 使用教程

1. 什么是 @jsbit/react-redux-router

@jsbit/react-redux-router是一款React应用程序开发中使用的路由库，它能够帮助你处理视图和URL之间的映射，并通过Redux管理状态。

2. 安装

在使用@jsbit/react-redux-router之前，你需要确保你的项目已经安装了以下依赖：

  • React v16.8或以上版本
  • Redux v4.0或以上版本

在你的项目中使用npm或yarn安装@jsbit/react-redux-router

npm

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

yarn

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

3. 基本用法

3.1 创建路由

首先，在你的应用程序中创建一个Router组件，该组件是@jsbit/react-redux-router的核心。

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

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

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

Router组件需要嵌套在Redux的Provider中，并且需要在组件上使用history属性来指定其使用哪个history。这里我们使用createBrowserHistory来创建一个浏览器历史记录。

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

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

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

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

3.2 添加路由

接下来，我们需要定义路由规则并将其添加到我们的Router中。@jsbit/react-redux-router提供了两种定义路由的方式：

  • 使用<Route>组件
  • 使用<Switch>组件

<Route>组件用于为每个URL路径匹配一个组件。要使用它，您需要指定path prop以告诉路由器何时呈现此组件，并使用component prop指定要呈现的组件。

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

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

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

exact prop用于指定该路由仅匹配路径完全匹配的URL。

<Switch>组件用于从多个组件中呈现一个组件。使用<Switch>时，第一个与当前URL匹配的路由将被呈现，而其他路由将被忽略。

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

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

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

3.3 使用链接

一旦您的路由已经添加，您可以使用<Link>组件来创建导航链接。<Link>组件会自动处理URL和浏览器历史记录，使您的应用程序感觉就像是完整的页面刷新。

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

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

3.4 获取路由参数

在某些场景下，您可能会想要从URL中提取一些参数，以处理不同的组件。例如，如果您有一个/users/123的URL，您可能希望渲染一个名为UserProfile的组件，该组件将ID 123 作为prop。

您可以使用<Route>组件的render prop来实现这一点，该prop将根据当前的URL匹配动态地渲染传递给它的组件。

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

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

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

3.5 使用Redux管理状态

除了处理URL之外，@jsbit/react-redux-router还可以与Redux集成，以帮助您管理共享状态。您可以通过传递自己的getStateFromRoute函数实现这一点，该函数将返回一个对象，该对象将添加到路由状态中。

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

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

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

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

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

4. 意义和指导

使用@jsbit/react-redux-router可以帮助前端开发人员更轻松地处理以下问题：

  1. URL路径处理，能够清晰地定义应用程序的页面结构
  2. 与Redux的集成，可以轻松管理共享状态
  3. 使用navigation组件，可以避免在代码中使用大量调用history.push方法的代码
  4. 自由和灵活的配置，让我们能够得到更多的自定义和个性化的体验

可以看出，使用@jsbit/react-redux-router是非常有意义和指导意义的，在实际开发项目中也应用广泛。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668e3d9381d61a3540a56

阅读全文

猜你喜欢

  • npm 包 ngrx-componentmodelformdefinitions-material 使用教程

    前言 ngrx-componentmodelformdefinitions-material 是一个基于 Angular、ngrx 和 Material Design 的 npm 包，用于方便快捷地生...

    3 年前
  • npm 包 imfetch 使用教程

    概述 imfetch 是一个使用 Promise 封装了 fetch 的 npm 包，可以方便地进行前端数据请求。它支持 GET、POST 等多种请求方法，也可设置请求头、请求体、超时等参数。

    3 年前
  • npm 包 wd_regexp 使用教程

    前言 在前端开发中，我们经常需要处理各种字符串或文本的操作，如匹配、替换、截取等。正则表达式（RegExp）是一种强大的字符串处理工具，但是对于许多前端开发者来说，正则表达式的语法和复杂度常常会成为一...

    3 年前
  • npm 包 enn-ionic-iflytek 使用教程

    简介 enn-ionic-iflytek 是一个能够方便地在 Ionic 应用中使用讯飞语音识别与合成服务的 npm 包。讯飞语音是一款非常强大的语音服务平台，可以为我们的应用提供高质量的语音服务，如...

    3 年前
  • npm 包 hubudp 使用教程

    简介 hubudp 是一个基于 Node.js 的轻量级 UDP 通信库，可以帮助开发者轻松实现 UDP 数据包的发送和接收。 在前端开发中，我们可能需要使用 UDP 来传输一些数据，比如游戏中的必要...

    3 年前
  • npm 包 internet-connection-checker 使用教程

    有时候我们需要检查用户是否连接到 Internet，这是我们在前端开发中经常遇到的问题。今天，我们就来介绍一个能方便地检查用户是否联网的 npm 包——internet-connection-chec...

    3 年前
  • npm 包 enn-ionic-jsms 使用教程

    在现代的前端开发中，我们经常会使用各种第三方工具和库来辅助我们的开发工作。其中 npm 是一个非常流行的前端包管理工具，适用于 JavaScript 语言的约定。 在本文中，我们将介绍一款非常实用的 ...

    3 年前
  • npm 包 finchat-jsbridge-sdk 使用教程

    在前端开发中，我们通常需要使用不同的第三方库和插件来丰富我们的应用功能。其中，npm 包是一种十分常用的解决方案。在本文中，我们将介绍一款名为 finchat-jsbridge-sdk 的 npm 包...

    3 年前
  • npm 包 online-mgr 使用教程

    在线管理是许多项目中都需要的功能。虽然可以直接编写后台代码实现管理，但这种方法效率低且复杂。npm 包 online-mgr 可以轻松地实现在线管理，本文将介绍如何使用该 npm 包。

    3 年前
  • npm 包 roaming 使用教程

    前言 在前端开发中，常常需要引入别人写的库或者自己写的代码进行复用。而 npm 是一个非常流行的包管理工具，能够方便地将代码打包发布到 npm 上。本文将介绍一个名为 roaming 的 npm 包，...

    3 年前
  • npm 包 waccess 使用教程

    1. 简介 waccess 是一个 npm 包，它提供了一种简便的方式来检查文件或目录是否可访问。它的主要特点包括： 使用 Promise 和 async/await 来保持代码简洁和易于阅读。

    3 年前
  • npm 包 parcel-plugin-vdt 使用教程

    近年来，前端开发的生态圈变得越来越庞大和复杂。NPM 包扮演了一个至关重要的角色，解决了许多以前不可避免的问题，提供了前端开发的高效性和可重用性。在本文中，我们将深入介绍一种 npm 包——parce...

    3 年前
  • npm 包 kot 使用教程

    简介 kot 是一个开源、跨平台的文本编辑器。它使用 JavaScript 和 CSS 实现，并且可以通过 npm 包进行安装使用。 本文将介绍 kot 的基本使用教程，包括安装、启动、编辑文件等内容...

    3 年前
  • 使用 babel-plugin-danger-remove-unused-import-taro 插件实现 Taro 项目无用代码自动删除

    介绍 在前端项目开发中，经常会遇到无用代码的问题，比如未使用的 CSS 或者 JS 代码，无用的代码会导致项目体积变大，影响页面加载速度，而且也会降低代码可维护性。

    3 年前
  • npm 包 jspdf-extended 使用教程

    在前端开发中，我们通常需要生成 PDF 文件并将其用于打印和下载。在这种情况下，我们可以使用 jspdf-extended 这个 npm 包。jspdf-extended 提供了一些有用的功能，例如表...

    3 年前
  • npm 包 sys-logger 使用教程

    在现代前端开发中，日志记录是一个十分关键的组成部分。我们需要追踪代码的执行过程，发现潜在的问题，并且改善用户体验。这就要求我们需要一个强大的日志系统，而 sys-logger 就是一个不错的选择。

    3 年前
  • npm 包 wrestler 使用教程

    本文介绍一个适用于前端开发的 npm 包 wrestler，它提供了一些常用的 DOM 操作函数和一些实用的工具函数。 安装 在开发项目中使用 wrestler，可先运行以下命令进行安装： --- -...

    3 年前
  • npm包 "webpack-bem-i18n-loader" 使用教程

    如果你是一名前端开发者，你一定知道 webpack 这个强大的打包工具，并且也知道如何使用 webpack 加载不同类型的资源。但是，如果你的项目使用了 BEM 方法学进行组件化开发，并且需要使用 i...

    3 年前
  • npm 包 @umerrinayat/tiny 使用教程

    简介 在前端开发中，我们经常会用到字符串的缩短或者压缩，比如说在 URL 传参时需要将参数进行压缩，或者在数据传输过程中需要将 JSON 数据进行压缩等等。这时候，我们就需要使用一个工具来帮助我们快速...

    3 年前
  • npm 包 critical-cli 使用教程

    在前端开发中，我们经常需要开发或优化网站的性能，尤其是针对网站的加载速度进行优化。这个时候，我们会发现网站中一些静态资源的加载速度特别慢，需要进行特殊的优化。这时，就需要用到一个工具——critica...

    3 年前

相关推荐

    暂无文章