iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >React 如何向url中添加参数
  • 800
分享到

React 如何向url中添加参数

React url添加参数React url 参数React向url添加参数 2022-11-13 14:11:24 800人浏览 独家记忆
摘要

目录React 向url中添加参数React 获取url后面参数的值React 向url中添加参数 用@withRouter修饰组件,把不是通过路由切换过来的组件中,将react-r

React 向url中添加参数

用@withRouter修饰组件,把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上

使用queryString去序列化需要添加的参数:

queryString.stringify({
    name:liff,
    id:1111
})
// return name=liff&id=1111

在props中获取history,并且把序列化的后的参数push进去

import queryString from "query-string";
import {withRouter} from "react-router-dom";
history.push({
    queryString.stringify({
        name:liff,
        id:1111
    })
})

React 获取url后面参数的值

由于页面跳转需要取携带的token访问数据。

写一个公共方法


export function getUrlToken(name, str) {
		     const reg = new RegExp(`(^|&)${ name}=([^&]*)(&|$)`);
		     const r = str.substr(1).match(reg);
		     if (r != null) return  decodeURIComponent(r[2]); return null;
		}

在要获取值得页面进行引入

import { getUrlToken } from '写你建立公共方法的地址';
		//  结果测试
		constructor(peops){
			super(peops);
			const token = getUrlToken ('token',peops.location.search);
			console.log(token );
		}

测试结果

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: React 如何向url中添加参数

本文链接: https://www.lsjlt.com/news/171668.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • React 如何向url中添加参数
    目录React 向url中添加参数React 获取url后面参数的值React 向url中添加参数 用@withRouter修饰组件,把不是通过路由切换过来的组件中,将react-r...
    99+
    2022-11-13
    React url添加参数 React url 参数 React向url添加参数
  • react如何获取URL中参数
    目录react获取URL中参数react 获取URL原理下面是几个例子react获取页面跳转URL携带的参数总结react获取URL中参数 这个问题想必很多人都会遇到过,这里我说一下...
    99+
    2023-02-13
    react获取URL参数 react URL参数 获取URL参数
  • vue如何给url统一添加公共参数
    这篇“vue如何给url统一添加公共参数”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何给url统一添加公共参数”文...
    99+
    2023-07-04
  • react如何向数组中追加值
    目录react向数组中追加值react处理数组的值1. 追加数组的值2. 删除下标为index的值react向数组中追加值 首先,渲染一个随机数,每个一秒变换一次,效果如下: 代码...
    99+
    2024-04-02
  • sqlserver如何向表中添加数据
    向表中添加数据可以使用 SQL 语句中的 INSERT INTO 语句。具体操作步骤如下: 打开 SQL Server Manag...
    99+
    2024-04-09
    sqlserver
  • sql如何向表中添加数据
    要向表中添加数据,可以使用 SQL 的 INSERT INTO 语句。语法如下: INSERT INTO table_name (c...
    99+
    2024-04-02
  • navicat如何向表中添加数据
    使用 navicat 向表中添加数据需要以下步骤:连接数据库。打开目标表。创建新行。输入数据,确保数据类型正确。选择字段(如果需要)。保存更改。验证插入是否成功。 如何使用 Navic...
    99+
    2024-04-23
    mysql navicat
  • eclipse如何向数据库中添加数据
    要将数据添加到数据库中,您需要执行以下步骤:1. 首先,您需要创建一个数据库连接。在Eclipse中,您可以使用JDBC(Java ...
    99+
    2023-08-14
    eclipse 数据库
  • python如何向数组中添加元素
    在Python中,可以使用append()方法向数组中添加元素。append()方法将元素添加到数组的末尾。以下是一个示例代码:``...
    99+
    2023-08-29
    python
  • 数据库如何向表中添加数据
    要向数据库表中添加数据,可以使用 SQL 语句中的 INSERT INTO 语句。INSERT INTO 语句有两种形式: 插入所...
    99+
    2024-04-02
  • java如何向mysql添加数据
    要向MySQL添加数据,可以使用Java中的JDBC(Java Database Connectivity)来连接和操作数据库。以下...
    99+
    2023-09-11
    java mysql
  • django views如何重定向到带参数的url
    本篇内容主要讲解“django views如何重定向到带参数的url”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“django views如何重定向到带参数的url”吧!当一个函数进行完成后需要...
    99+
    2023-06-14
  • 如何在 launch.json 文件中添加 -race 参数?
    本篇文章向大家介绍《如何在 launch.json 文件中添加 -race 参数?》,主要包括,具有一定的参考价值,需要的朋友可以参考一下。问题内容我在 visual studio code 中调试...
    99+
    2024-04-05
  • php如何向数据库添加数据
    要向数据库添加数据,可以使用PHP的数据库扩展,比如MySQLi或PDO。 以下是使用MySQLi向数据库添加数据的示例: // 数...
    99+
    2024-04-09
    php
  • Jquery如何获取url及url参数
    这篇文章主要介绍了Jquery如何获取url及url参数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   在网页的Get方式传递参数的时...
    99+
    2024-04-02
  • sql如何向表中添加日期
    在SQL中,可以使用INSERT INTO语句向表中添加日期。以下是一个示例: INSERT INTO 表名 (日期列名) VALU...
    99+
    2024-02-29
    sql
  • SpringBoot多controller如何添加URL前缀
    这篇“SpringBoot多controller如何添加URL前缀”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Spring...
    99+
    2023-07-05
  • js如何获取URL中的参数
    这篇文章主要介绍js如何获取URL中的参数,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!获取 URL 中的参数这个需求在三大框架的时代应用貌似不多了,不过面试中问的还是蛮多的,了解一下是好的简单实现var ...
    99+
    2023-06-27
  • 如何向Pandas中的DataFrame添加行
    这篇文章给大家分享的是有关如何向Pandas中的DataFrame添加行的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。您可以使用df.loc()函数在Pandas DataFrame的末尾添加一行:#add&nb...
    99+
    2023-06-29
  • JavaScript中如何获取url中的参数
    这篇文章给大家分享的是有关JavaScript中如何获取url中的参数的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。  1、获取指定ur...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作