npm 包 jguddas-react-router-redux 使用教程

在前端开发中，路由和状态管理是非常重要的概念。React-router 和 Redux 是两个非常出名的库，用于管理路由和状态。但是，如何在React项目中集成这两个库并使用它们是一个相对麻烦的过程。这就是为什么出现了 jguddas-react-router-redux 这个 npm 包，它是一个集成了 React-router 和 Redux 的桥梁，可以简化这个过程。

安装和配置

首先，使用 npm 安装 jguddas-react-router-redux 包:

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

在你的项目中，你需要创建一个 Redux store，可以使用 redux-thunk 来处理异步 actions:

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

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

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

在上面的代码中，我们首先创建了一个 browser history 对象，然后使用 createRouterMiddleware 创建中间件，最后使用 applyMiddleware 方法将中间件和 redux-thunk 应用到 store 上面。最后使用 Provider 组件和 Router 组件包裹我们的应用。

Link 使用

jguddas-react-router-redux 中的 Link 和 NavLink 组件和 React-router 中的 Link 和 NavLink 功能相同，但是它们会响应 Redux 的状态变化。

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

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

路由参数

在 React-router 中，我们通常使用 this.props.match.params.* 来获取路由参数。但是在 jguddas-react-router-redux 中，我们需要使用 this.props.location.payload 来获取路由参数。

例如，假设我们有一个路由 /user/:id，我们可以在组件中获取参数 id 的方式如下：

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

我们也可以在 actions 中使用 push 方法来更新路由：

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

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

总结

通过使用 jguddas-react-router-redux，我们可以更容易地集成 React-router 和 Redux，并使用 Redux 状态来控制路由。我们可以使用 Link 和 NavLink 组件来处理链接，使用 this.props.location.payload 来获取路由参数，还可以使用 push 方法在 action 中更新路由。

完整示例代码：

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

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

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

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

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

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

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

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

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

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

阅读全文

猜你喜欢

  • npm 包 react-scrollback 使用教程

    前言 在前端开发中，我们经常需要实现页面滚动到顶部的功能。一种简单易用的实现方式就是使用 react-scrollback 这个 npm 包。本文将详细介绍该包的使用方法，帮助大家学习使用该包，实现滚...

    3 年前
  • npm 包 verx 使用教程

    简介 npm 是前端开发中常用的包管理工具，它提供了方便快捷的安装和管理第三方包的方式。而 verx 则是一个 npm 包，通过它可以在项目中轻松地实现数据的验证和变换。

    3 年前
  • npm 包 light-countdown 使用教程

    随着现代 Web 应用的日益普及，倒计时功能在我们的产品中变得越来越重要。而 npm 包 light-countdown 可以为我们提供一个简单、灵活、高度可定制的倒计时组件。

    3 年前
  • npm 包 rary_utils 使用教程

    rary_utils 是一个前端常用的 JavaScript 工具类库，它包含了多个实用的函数和方法，可以帮助我们提高开发效率，减少重复代码的编写。在这篇文章中，我们将会介绍如何使用 rary_uti...

    3 年前
  • npm 包 @mrayanne113/tdd 使用教程

    在前端开发中，自动化测试是一个重要的流程，可以大大提高我们的代码质量和效率。@mrayanne113/tdd 是一个专为前端自动化测试而设计的 npm 包，本文将介绍如何使用它来进行测试，以及其它相关...

    3 年前
  • npm 包 bryanmedinagarcia 使用教程

    前言 bryanmedinagarcia 是一款非常好用的 npm 包，尤其适合前端开发。该 npm 包提供了很多有用的功能和组件，可以让我们更加轻松和高效地开发 Web 应用程序。

    3 年前
  • npm 包 perfmor 使用教程

    perfmor 是一个优化 Web 性能的工具集合，可以帮助前端工程师分析页面性能并提供相应的优化建议。它集成了 Lighthouse、PageSpeed Insights 和 Chrome 开发者工...

    3 年前
  • npm 包 minimal-electron-react-app 使用教程

    前言：electron 可以让我们使用前端的技术栈来构建桌面应用程序，minimal-electron-react-app 是一个极简的 electron+react 模板项目，让我们可以快速的使用 ...

    3 年前
  • npm 包 @markusylisiurunen/md-table 使用教程

    在前端开发的过程中，我们经常需要展示数据表格。而使用 markdown 格式来写表格非常方便，尤其是在撰写技术文档时。@markusylisiurunen/md-table 就是一款很好的 npm 包...

    3 年前
  • npm 包 in1t-react-native-voice 使用教程

    介绍 in1t-react-native-voice 是一个用于 React Native 的语音识别组件，可以用于识别用户的语音并将其转换为文本，同时也支持多种语言。

    3 年前
  • npm 包 insight-tealcoin-api 使用教程

    简介 insight-tealcoin-api 是一个通过 Tealcoin 钱包接口获取区块链信息的 npm 包。它为开发人员提供了一种简单的方法来获取有关 Tealcoin 区块链的数据，包括块，...

    3 年前
  • npm 包 siwi-oauth 使用教程

    本教程将介绍如何使用 siwi-oauth npm 包，它是一个用于在 Node.js 应用程序中实现 OAuth2 授权的开源包。OAuth2 是一种用于安全地授权第三方应用程序访问用户数据的流行协...

    3 年前
  • npm 包 @kobi-kadosh/enzyme-adapter-react-16 使用教程

    简介 在开发前端应用的过程中，我们经常使用 React 框架。React 有很多测试工具，其中一个非常受欢迎的工具是 Enzyme。Enzyme 是一个 React 组件测试工具，具有易于使用、兼容性...

    3 年前
  • npm 包 egg-oauth2-plugin 使用教程

    在 Web 应用开发过程中，授权登录是一个很常见的需求。为了方便前端和后端开发者在实现授权登录时节省时间和精力，有很多前后端通用的授权登录库。其中，egg-oauth2-plugin 是基于 Egg ...

    3 年前
  • npm 包 get-npm-scripts 使用教程

    npm 是现代化的 JavaScript 包管理器，包含了 JavaScript 所需的各种开源库和框架。在开发过程中，经常需要运行一些提供的脚本，如编译、打包、测试等。

    3 年前
  • npm 包 moweex-image-cropperv1 使用教程

    前言 作为前端工程师，我们往往需要使用一些第三方库或者插件来方便我们开发及提高我们的工作效率。这篇文章将介绍一款可以方便地进行图片裁剪的 npm 包 moweex-image-cropperv1，并详...

    3 年前
  • npm 包 @emkuck/complete-me 使用教程

    @emkuck/complete-me 是一个前端开发中常用的自动补全工具，可以在输入框中快速输入并搜索内容，提高用户体验，节省时间。在本文中，我们将介绍该包的使用方法及应用示例。

    3 年前
  • npm 包 @bem/sdk 使用教程

    随着前端领域的不断发展，BEM（块、元素、修饰符）作为可重用组件的一种解决方案正在变得越来越流行。在 BEM 中，我们可以将页面拆分为多个块，每个块都有一个标识符，并且可以包含多个元素和修饰符。

    3 年前
  • npm 包 console-logos 使用教程

    在前端开发中，经常需要输出日志信息来帮助我们调试代码。通常，我们使用 console.log() 函数来输出信息。然而，console.log() 函数的输出结果很难让我们一眼看出信息所处的位置和类型...

    3 年前
  • npm包 n4v-privacy-sidebar 使用教程

    前言 在现代 web 应用程序中，保护用户隐私变得越来越重要。为了解决这个问题，n4v-privacy-sidebar 这个 npm 包应运而生，它是一个轻量级的侧边栏 UI 组件，它可以在您的 we...

    3 年前

相关推荐

    暂无文章