React 如何向url中添加参数

目录
  • React 向url中添加参数
  • React 获取url后面参数的值

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 );
		}

测试结果

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解React-Router中Url参数改变页面不刷新的解决办法

    问题 今天在写页面的时候发现一个问题,就是在React Router中使用了Url传参的功能,像这样: export class MainRouter extends React.Component { render() { return ( <BrowserRouter> <Switch> ... <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/> ... </Switch

  • 浅谈react路由传参的几种方式

    浅谈react路由传参的几种方式

    第一种传参方式,动态路由传参 通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url <Link to='/home?name=dx'>首页</Link> 如果想真正获取到传递过来的参数,需要在对应的子组件中 this.props.location.search 获取字符串,再手动解析 因为传参能够被用户看见,传递获取比较麻烦,所以不推荐 第二种传参方式,隐式路由传参 <Link to={{ pathname: '

  • React路由管理之React Router总结

    React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查. React Router是做什么的呢,官方的介绍是: A complete routing library for React,keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dy

  • React路由组件传参的三种方式(params、search、state)

    React路由组件传参的三种方式(params、search、state)

    目录 向路由组件传递params参数 向路由组件传递search参数 向路由组件传递state参数 总结三种向路由组件传参的方式 向路由组件传递params参数 当点击消息1这个导航链接时,展示下方对应的Detail路由组件,并向这个组件传递params参数(ID,TITLE,CONTENT)信息. 向路由组件传递params参数:在路径后面跟上想要传递的值 { messageArr.map((msgObj) => { return ( <li key={msgObj.id}> <

  • React 如何向url中添加参数

    React 如何向url中添加参数

    目录 React 向url中添加参数 React 获取url后面参数的值 React 向url中添加参数 用@withRouter修饰组件,把不是通过路由切换过来的组件中,将react-router 的 history.location.match 三个对象传入props对象上 使用queryString去序列化需要添加的参数: queryString.stringify({     name:liff,     id:1111 }) // return name=liff&id=1111 在p

  • 浅析JS获取url中的参数实例代码

    js获取url中的参数代码如下所示,代码简单易懂,附有注释,写的不好还请见谅! function UrlSearch() { var name, value; var str = location.href; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&&

  • 使用JavaScript获取URL中的参数(两种方法)

    本文给大家分享两种方法使用js获取url中的参数,其中方法二是使用的正则表达式方法,大家可以根据需要选择比较好的方法,废话不多说了,直接看详细介绍吧. 方法一: //取url参数 var type = request("type") function request() { var query = location.search; var paras = arguments[0]; if (arguments.length == 2) { query = arguments[1]; }

  • 从URL中提取参数与将对象转换为URL查询参数的实现代码

    一.从URL中提取参数 有下列字符串: var linkURL = 'http://localhost:8080/String/string_6.html?昵称=小西山子&age=24#id1'; 对于一个真实的URL地址,可以用js来读取location中的相关信息来获得某些信息,下面列举一些: 复制代码 代码如下: location.origin : http://localhost[域] location.pathname : /project_js/Javascript/js_basic

  • php解析url并得到url中的参数及获取url参数的四种方式

    下面一段代码是php解析url并得到url中的参数,代码如下所示: <?php $url = 'http://www.baidu.com/index.php?m=content&c=index&a=lists&catid=6&area=0&author=0&h=0&region=0&s=1&page=1'; $arr = parse_url($url); var_dump($arr); $arr_query = convertU

  • javascript将url中的参数加密解密代码

    今天在做一个老项目时,遇到一个需求,在javascript将url中的参数加密解密,从网上找发现了这段有用的代码: 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript">    <!-- Begin    function Encrypt(str, pwd) {        if(str=="")return "";        str = escape(str);        if(!pwd

  • 浅谈SpringBoot处理url中的参数的注解

    1.介绍几种如何处理url中的参数的注解 @PathVaribale 获取url中的数据 @RequestParam 获取请求参数的值 @GetMapping 组合注解,是 @RequestMapping(method = RequestMethod.GET) 的缩写 (1)PathVaribale 获取url中的数据 看一个例子,如果我们需要获取Url=localhost:8080/hello/id中的id值,实现代码如下: @RestController public class Hello

  • python 获取url中的参数列表实例

    Python的urlparse有对url的解析,从而获得url中的参数列表 import urlparse urldata = "http://en.wikipedia.org/w/api.php?action=query&ctitle=FA" result = urlparse.urlparse(urldata) print result print urlparse.parse_qs(result.query) 输出: ParseResult(scheme='http',

  • angularJS1 url中携带参数的获取方法

    index.html 从此界面跳转到a.html界面 <!doctype html> <html> <head> <meta charset="utf-8"> <title>form demo</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.

  • Vue项目获取url中的参数(亲测可用)

    目录 情况一:内部页面之间互相传值 情况二:外部跳转VUE项目时自带参数 1 获取?后面的参数 2 获取不带?的URL中的参数 亲测可用,若有疑问请私信 获取url参数有两种情况: 情况一:内部页面之间互相传值 这里先讲情况一,因为同一项目内互相传值比较简单,假如要从A页面跳转到B页面,并传值.就要在A页面这么写 this.$router.push({name:"B",query:{ Id : this.tId , ... }}) 进入B页面之后,在B页面内这么写 this.Id =

随机推荐