react更改路由入参_JavaScript基础教程 react router路由传参

本篇教程介绍了JavaScript基础教程 react router路由传参，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

今天，我们要讨论的是react router中Link传值的三种表现形式。分别为通过通配符传参、query传参和state传参。

ps:进入正题前，先说明一下，以下的所有内容都是在react-router V4的版本下。

1.通配符传参

Route定义方式：

Link组件：

通配符

参数获取：

this.props.match.params.name

注意这个match,许多博客活文章都是忽略了它，导致取不到值。这里的this.props.match.params.name === ‘通过通配符传参’。

优点:简单快捷,并且，在刷新页面的时候，参数不会丢失。

缺点:只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

如果，你想传对象的话，可以用JSON.stringify(),想将其转为字符串，然后另外的页面接收后，用JSON.parse()转回去。这里简单提一下，不赘述。

2.query

Route定义方式：

Link组件：

var query = {

pathname: '/query',

query: '我是通过query传值 '

}

query

参数获取：

this.props.location.query

这里的this.props.location.query === '我是通过query传值'

优点：优雅，可传对象

缺点：刷新页面，参数丢失

3.state

Route定义方式：

state

Link组件：

var state = {

pathname: '/state',

state: '我是通过state传值'

}

参数获取：

this.props.location.state

这里的this.props.location.state === '我是通过query传值'

优点：优雅，可传对象

缺点：刷新页面，参数丢失

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！

react更改路由入参_JavaScript基础教程 react router路由传参相关推荐

mybatis java传参_[Java教程]Mybatis批量和传参
[Java教程]Mybatis批量和传参 0 2014-07-31 04:00:12 MyBatis中批量插入方法一: resultType="java.lang.String" ...
django-路由传参-视图捕获URL的参数-位置传参-关键词传参
图例中的url是旧版本的方法,它对应了新版的 re_path 位置传参路由中写的是正则式被括号括起来的内容,会被作为参数,传递给视图视图应该新增形参来接收数据关键字参数如果给分组起了名字视 ...
Android:页面跳转传参方式一，页面跳转传参方式二
一.页面跳转传参方式一跳转的过程如何传参:也就是页面之间如何传递参数,有点像函数调用如何传参,页面跳转也要传参. 复制一个工程你要跳转,(现在的代码如下),intent 既然能设置跳转到哪个页面 ...
变量命名规则_JavaScript基础教程（二）变量、常量与运算符
常量变量与运算符从本次课程开始我们将进入JavaScript基础教程学习,本课程附带PPT讲义,课程主要针对JavaScript学习入门者. 变量在计算机程序设计语言中,变量是存储数据的容器,变量 ...
javascript基础教程_JavaScript基础教程（九）对象、类的定义与使用
对象.类的定义与使用对象与类是面向对象程序设计语言教学过程中不可避免需要讲解的内容之一.很多人将两者混为一谈,简单认为对象就是类,类就是对象.实际上深入分析的话,对象与类的区别还是较为明显的.本文主 ...
c语言位运算负数的实例_JavaScript基础教程（四）二进制位运算
JavaScript基础教程二进制位运算 JavaScript中的位运算是针对二进制数据提供的运算与操作.在JavaScript标准中规定了二进制位运算时其操作数长度为32位,其最高位为符号位,因此能 ...
100内奇数之和流程图_JavaScript基础教程（六）流程控制之循环语句
JavaScript入门教程之循环语句循环语句从字面意思理解就是重复执行,能够让计算机按照程序员要求重复执行某种操作的能力是所有程序设计语言所必须具备的基本能力.在JavaScript程序设计语言中 ...
python路由编程_Python Django基础二之URL路由系统
MVC和MTV框架 MVC Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负责业务 ...
vue3 router.push 传参路由跳转错误提示 Argument type {xxx} is not assignable to parameter type RouteLocationRaw
文章目录问题描述解决方法问题描述传参时,router.push中布尔值变量会给出一个错误提示 setup(){const router = useRouter();/** 查看已办任务的流程记 ...

react更改路由入参_JavaScript基础教程 react router路由传参

react更改路由入参_JavaScript基础教程 react router路由传参相关推荐

最新文章

热门文章