您现在的位置是：网站首页> 编程资料编程资料

React 如何向url中添加参数_React_

2023-05-24 365人已围观

简介 React 如何向url中添加参数_React_

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

测试结果

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

您可能感兴趣的文章:

上一篇：关于React动态修改元素样式的三种方式_React_

下一篇：React实现下拉框的key,value的值同时传送_React_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网