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 包 mm-serializer-json 使用教程

    在前端领域，随着 Web 应用的快速发展，前端工程师通常需要处理各种各样的数据格式。其中，JSON（JavaScript Object Notation）是最常见的一种数据格式之一。

    3 年前
  • npm 包 type-from 使用教程

    当我们在前端项目中使用 TypeScript 或者 JavaScript 时，我们通常需要考虑数据类型的转换。我们可能会需要从一个数据类型中推断出另一个数据类型，或者检查一个变量是否符合某个类型的格式...

    3 年前
  • npm 包 regevbr-proxy-chain 使用教程

    在前端开发中，有时需要使用代理服务器进行请求，以便于在开发阶段模拟调用接口，测试数据等。在此过程中，我们通常会使用代理工具来实现代理功能，其中 regevbr-proxy-chain 是其中一个非常优...

    3 年前
  • npm 包 testlijie111 使用教程

    1. 新手必读 1.1 简介 npm 是 Node.js 的包管理工具，它是全球最大的软件注册中心，也是前端开发者必备的工具之一。testlijie111 是一个针对前端开发的 npm 包，它提供了一...

    3 年前
  • npm 包 w3c-dcat 使用教程

    随着数据技术和互联网的不断发展，数据资源的管理和共享越来越重要。而在数据共享中，标准和规范的重要性也日益凸显出来。 w3c-dcat 是一种用于数据目录描述的开放标准规范，用于描述集合、数据资源和分发...

    3 年前
  • npm 包 hexo-renderer-njucks 使用教程

    什么是 hexo-renderer-njucks？ hexo-renderer-njucks 是一种 hexo 渲染引擎，使用 njucks 模板引擎来呈现内容。它能够更加高效和灵活地展示博客内容，为...

    3 年前
  • npm 包 microauth-vkontakte 使用教程

    简介 microauth-vkontakte 是一个在 Node.js 中使用的微型 VKontakte OAuth 2.0 授权包，可以帮助开发者快速地在他们的应用程序中实施 VKontakte O...

    3 年前
  • npm 包 s3-upload-by-readstream 使用教程

    在进行前端开发的过程中，我们经常需要将一些大型文件上传至云端进行存储，比如图片、视频、文档等等。AWS S3 是一个非常流行的云存储解决方案，而 s3-upload-by-readstream 则是一...

    3 年前
  • npm 包 @spernigotti/node-sass-json-importer 使用教程

    在前端开发过程中，我们经常需要使用 SCSS 作为样式语言，其中又涉及到很多的依赖包。今天，我来给大家介绍一个非常有用的包 @spernigotti/node-sass-json-importer，该...

    3 年前
  • npm 包 format-object-keys 使用教程

    介绍 当我们在前端开发中遇到一个对象需要进行格式化输出时，可能会遇到其中的键（key）需要进行一些重命名或者格式化的情况。通常我们会选择手动处理这个对象，这个过程通常是耗时且容易出错的。

    3 年前
  • npm 包 mod12222 使用教程

    在前端开发过程中，我们常常需要使用各种 npm 包来构建我们的项目。其中，npm 包 mod12222 是一个非常有用的工具类库，可以帮助我们快速完成一些常见的开发任务。

    3 年前
  • npm 包 mm-serializer-msgpack 使用教程

    在前端开发中，我们常常需要处理复杂的数据结构，而 JSON 作为一种广泛使用的数据交换格式，在很多场合下无法很好地满足我们的需求，比如说本地存储需求时的空间占用问题、数据传输时的带宽问题等等。

    3 年前
  • npm包fw-sockjs-client使用教程

    前言 在前端开发过程中，我们经常需要使用 WebSocket 与服务器进行数据交互。fw-sockjs-client 是一个易于使用和简洁的 SockJS 客户端，提供了 WebSocket 和长轮询...

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

    简介 在前端开发中，我们常常需要进行日志记录。本文将介绍npm包xng-op-logger，它是一个为Angular应用开发者提供的一款简单、易用的日志记录工具。 安装 在Angular项目中安装xn...

    3 年前
  • npm 包 @ben-x9/react-toolkit 使用教程

    简介 @ben-x9/react-toolkit 是一个前端开发工具包，提供了在 React 项目中常用的一些组件、函数和样式，用于提高开发效率和统一项目 UI 风格。

    3 年前
  • NPM 包 modularscale-ratios 使用教程

    如果你是前端开发人员，你一定知道在设计响应式网站和应用程序的过程中，一些常见的问题是调整字体大小和每个元素之间的比例。好在有一些好用的 NPM 包可以帮助我们处理这些问题，比如 modularscal...

    3 年前
  • npm包react-on-off-state使用教程

    前言 在现代web应用程序中，经常需要使用开关和状态。这种状态很可能是当前选中的选项，一个开关的状态，或者一个按钮的状态。React是一个非常好用的JavaScript库，它为状态管理和组件化方案提供...

    3 年前
  • npm 包 vue-cuba-app 使用教程

    在前端开发中，为了提高开发效率和代码可复用性，我们经常使用不同的工具和库。而 npm 是目前最受欢迎的包管理器之一，提供了大量的开源库和工具，包括 Vue.js，React等前端框架。

    3 年前
  • npm 包 cordova-plugin-xyprogress 使用教程

    概述 cordova-plugin-xyprogress 是一个基于 Cordova 框架的插件，用于在移动端应用上展示进度条。使用这个插件可以让你的应用变得更加直观且用户友好。

    3 年前
  • npm 包 wm-rocketmq 使用教程

    在前端开发中，消息队列是非常重要的一部分。RocketMQ 是一个开源的分布式消息传递系统，具有高吞吐量、低延迟、高可用性、强容错能力等特点。本文将介绍一个基于 RocketMQ 的 npm 包 wm...

    3 年前

相关推荐

    暂无文章