npm 包 `rrrouter-provider-history` 使用教程

简介

rrrouter-provider-history 是一个 React Router v4 的 history provider。它使用 HTML5 的 history API 来实现无刷新页面跳转的前端路由。

安装

可以通过 npm 来安装 rrrouter-provider-history:

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

使用

在 React 项目中使用 rrrouter-provider-history，需要先设置 Provider：

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

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

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

在上面的代码中，我们使用 createBrowserHistory 来创建 history 对象，并将其作为 prop 传递给 Provider。我们用 React Router v4 的 Router 来包裹整个应用，并在 Provider 内部使用。

在组件中获取当前的路由信息：

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

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

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

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

在上面的代码中，我们使用 withRRRouter 来获取 match, location, history 等参数。我们通过 location.pathname 来获取当前的路由路径，并使用 history.push 来实现跳转。

示例

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

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

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

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

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

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

        --- --

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

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

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

在上面的示例中，我们展示了如何在组件中使用 withRRRouter 来获取 location 和 history 参数。我们使用 history.push 来实现跳转。除此之外，我们还展示了 Router, Route, Link 和 Switch 的用法。

总结

rrrouter-provider-history 是一个很棒的 React Router v4 的 history provider，它可以实现 React 前端路由的跳转。我们可以通过它来获取当前路由的信息和跳转路由。在使用它的时候，需要先在 Provider 中设置 history 对象，并在组件中使用 withRRRouter 来获取 location 和 history 等参数。

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

阅读全文

猜你喜欢

  • npm 包 fis-parser-swig2 使用教程

    在前端开发中，我们经常需要使用前端构建工具对静态资源进行优化、合并、压缩等操作。比较常用的构建工具有 fis3 和 webpack 等。而 swig2 是一种模板引擎，能够让我们在前端代码中使用模板来...

    2 年前
  • 使用 npm 包 add-array-methods 进行数组方法操作

    前言 在开发 Web 应用程序时，前端工程师通常需要频繁使用到数组相关的方法。而 JavaScript 自带的数组方法并不够丰富，难以满足我们的需求，因此我们需要引入一些第三方的 npm 包。

    2 年前
  • npm 包 git-list-stashes 使用教程

    在开发过程中，我们经常需要对代码进行版本控制。Git 工具是目前最流行的版本控制工具之一。在 Git 中，当我们需要在代码分支之间进行切换时，有时会发现一些代码被暂时保存在了仓库中，这些暂存在仓库中的...

    2 年前
  • npm包 options-to-spawn-args 使用教程

    在前端开发的过程中，我们经常需要使用npm包来协助我们进行项目开发。其中，options-to-spawn-args是一个非常好用的npm包，它可以帮助我们将JSON对象转化为命令行参数数组，使我们可...

    2 年前
  • npm 包 v-flow 使用教程

    介绍 v-flow 是一个 Vue.js 的 npm 包，它提供了一系列基于 SVG 的流程图组件，使创建流程图变得更加容易和简便。v-flow 提供了大量的选项，使你可以自由地配置每个节点和边线的样...

    2 年前
  • npm 包 @archei_shakinko/packagetest 使用教程

    在前端开发中，我们通常会使用 npm 包来提高开发效率和代码复用性。而 @archei_shakinko/packagetest 是一个优秀的 npm 包，它提供了丰富的功能和易用的接口，可以极大地帮...

    2 年前
  • npm 包 xerver 使用教程

    前言 在前端开发过程中，我们经常需要在本地搭建一个简单的服务器，以方便调试和开发。而 xerver 是一个类似于 Apache 轻量级服务器的 npm 包，可以让我们很方便地搭建本地服务器，以供前端开...

    2 年前
  • npm 包 starring 使用教程

    在前端技术发展的今天，npm 包成为了我们日常开发中难以缺少的重要工具。npm 包的数量已经超过了 100 万，其中很多都是非常优秀的，为我们的开发提供了了很多方便。

    2 年前
  • npm包fmp-platzom使用教程

    前言 在前端开发中，我们常常需要处理字符串，对于字符串的转换尤为常见。在实际开发过程中，如果每次都自己实现这些转换函数，无疑会浪费大量的时间和精力。此时，一个好用且易于集成的npm包就显得尤为重要。

    2 年前
  • npm 包 fredclement91 使用教程

    什么是 fredclement91？ fredclement91 是一个 npm 包，它为前端开发者提供了一些常用的工具函数，如日期格式化、浏览器判断等等。这些工具函数在实际开发中经常会用到，使用 f...

    2 年前
  • npm 包 eslint-config-osemistandard 使用教程

    本文将详细介绍如何使用 npm 包 eslint-config-osemistandard 进行代码风格检查，并提供示例代码。本教程对于前端开发者来说具有指导意义，有助于提高代码质量和可维护性。

    2 年前
  • npm 包 basic-loaders 使用教程

    前言 在前端开发中，经常需要使用到各种加载器进行资源的加载和加载效果的展示，这一方面是不可或缺的，然而编写加载器也是一件比较浪费时间和精力的事情，这时我们就需要用到一些成熟的加载器。

    2 年前
  • npm 包 react-thumb-cropper 使用教程

    在前端开发中，图片处理是一个经常遇到的问题。而 react-thumb-cropper 就是一个非常好用的 npm 包，它可以帮助我们快速、方便地裁剪图片。在本文中，我们将介绍 react-thumb...

    2 年前
  • npm 包 elm-react 使用教程

    在前端开发中，我们经常需要构建各种复杂的应用。为了提高开发效率和代码复用度，我们通常会使用各种类库和框架。其中，elm-react 就是一个非常常用的 npm 包，它是基于 elm 编程语言和 Rea...

    2 年前
  • npm 包 json-realtime 使用教程

    简介 Web 应用程序通常需要从服务器获取数据并实时刷新页面。json-realtime 是一个 npm 包，可让开发人员在 Web 应用程序中直接观察和使用实时 JSON 数据。

    2 年前
  • npm 包 searchd-http-client 使用教程

    在前端开发中，我们常常需要向后端发送 HTTP 请求来获取数据。为了更加方便地处理这些请求，一个好用的 HTTP 请求库显得尤为重要。在 Node.js 环境下，NPM 是一个非常流行的包管理器，可以...

    2 年前
  • npm 包 uikit3-extra-widths 使用教程

    当我们在使用 UIkit3 构建我们的网站或应用时，它已经提供了很多有用的 CSS 类，但有时我们会发现我们需要一些额外的宽度选项来满足我们的需求。这就是 uikit3-extra-widths 包的...

    2 年前
  • npm 包 telegram-types 使用教程

    前言 在使用 Telegram Bot API 进行开发时，有时候需要使用到 TypeScript 类型定义。telegram-types 就是一个针对 Telegram Bot API 的类型定义库...

    2 年前
  • npm 包 agl 使用教程

    什么是 agl？ agl 是一个基于 Node.js 的代码分析工具，它可用于分析 JavaScript 或 TypeScript 代码，以提供有关代码质量和安全性的详细信息。

    2 年前
  • npm 包 hubot-prj 使用教程

    hubot-prj 是一个基于 Hubot 的 npm 包，旨在通过对话界面管理项目，将团队合作变得更加高效、简单。 在本文中，我们将提供详细的使用教程，以及一些示例代码来帮助您更好地理解和应用 hu...

    2 年前

相关推荐

    暂无文章