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

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

1.通配符传参

Route定义方式:

<Route path='/path/:name' component={Path}/>

Link组件:

<Link to="/path/通过通配符传参">通配符</Link>

参数获取:

this.props.match.params.name

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

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

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

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

2.query

Route定义方式:

<Route path='/query' component={Query}/>

Link组件:

var query = {
pathname: '/query',
query: '我是通过query传值 '
} <Link to={query}>query</Link>

参数获取:

this.props.location.query

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

优点:优雅,可传对象

缺点:刷新页面,参数丢失

3.state

Route定义方式:

<Link to={state}>state</Link>

Link组件:

var state = {
pathname: '/state',
state: '我是通过state传值'
}
<Route path='/state' component={State}/>

参数获取:

this.props.location.state

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

优点:优雅,可传对象

缺点:刷新页面,参数丢失

以下,是我github上demo的地址,各位可以亲自尝试一下

https://github.com/hanwolfxue/react-router-parameter

react router路由传参的更多相关文章

  1. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  2. Vue的Router路由传参

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

  3. React中路由传参及接收参数的方式

    注意:  路由表改变后要重启服务      方式 一:          通过params         1.路由表中                     <Route path=' /s ...

  4. angular路由传参和获取路由参数的方法

    1.首先是需要导入的模块 import { Router } from "@angular/router";//路由传参用到 import{ActivatedRoute,Param ...

  5. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  6. react router @4 和 vue路由 详解(五)react怎么通过路由传参

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...

  7. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  8. < react router>: (路由)

    < react router> (路由): 思维导图: Atrial   文件夹下的index.js 文件内容: import React, { Component } from 'rea ...

  9. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

随机推荐

  1. MySQL数据库操作(DDL)

    一.创建数据库 语法:create database 数据库名称 [库选项]; 库选项:(可选)数据库的属性,一般有字符集与校对集,保存在数据库所属文件夹下的opt文件 charset:字符集,表示该 ...

  2. 九、IIC驱动原理分析

    学习目标:学习IIC驱动原理: 一.IIC总线协议 IIC串行总线包括一条数据线(SDA)和一条时钟线(SCL),支持“一主多从”和“多主机”模式:每个从机设备都有唯一的地址来识别. 图 1 IIC ...

  3. pwa学习笔记--简介

    1. 介绍 Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA 本质上是 Web App ...

  4. HDU1301 Jungle Roads(Kruskal)

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...

  5. FPGA数字鉴相鉴频器的开发记录

    1. 对于电机的锁相控制,需要对相差进行PI性质的环路滤波,但现有的锁相环中鉴频鉴相器输出为相差脉冲而非数字量,难以直接进行PI特性的环路滤波. 通过对晶振的非整数分频获取准确的参考时钟,基于触发器机 ...

  6. SQL On Streaming

    此文已由作者岳猛授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 实时计算的一个方向 实时计算未来会成为一个趋势,基本上所有的离线计算任务都能通过实时计算来完成,对于实时计算来 ...

  7. 纯原生仿ES6的Object.assign,实现深度合并对象

    源码: function isObj(x){ var type = typeof x; return x !== null && (type === 'object' || type ...

  8. 关于ArrayList add()方法 中的引用问题

    ArrayList的add方法每次添加一个对象时,添加 的是一个对象的引用,比如进行循环操作10次  lists.add(a) 每次 a会改变 ,这时候你会发现你在lists里添加了10个相同的对象a ...

  9. Qt Qwdget 汽车仪表知识点拆解1 速度表示

    先贴上效果图,注意,没有写逻辑,所以这些都是乱动的 这里线主要说一下中间显示速度的显示制作的方式,在这里,自己专门写了一个数字的仪表 考虑的一般的汽车是没有办法把瞬时速度提升到四位数的,所以我这里就放 ...

  10. C++学习004-Go To 语句使用

    C++中,goto语句主要负责语句的跳转,可以用在循环中跳出循环 注意gotu语句是无条件跳转,用的时候一定要谨慎,一定要少 编写环境 Qt 5.7 for(int i = 0;i<100;i+ ...