react路由传参的几种方式[通俗易懂]

react路由传参的几种方式[通俗易懂]第一种传参方式,动态路由传参通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url<Linkto=’/home?name=dx’>首页</Link>如果想真正获取到传递过来的参数,需要在对应的子组件中this.props.location.search获取字符串,再手动解析因为传参能够被用户看见…

大家好,又见面了,我是你们的朋友全栈君。

第一种传参方式,动态路由传参

<Link to='/home/dx'>首页</Link>

<Route path="/home/:name" component={ 
   Home}>

‘dx’为被传递的字符串,在home组件中 通过

this.props.match.params

会收到

{ 
    name: 'dx' }

优点:
1、‘传参和接收都比较简单’
2、刷新页面参数不会丢失
缺点:
1、 ‘当复杂数据对象或数组需要传参时,这样做比较麻烦,需要通过json字符串的方式进行处理’
2、多个参数的传递不方便
3、参数会出现在url上,不够安全

动态路由一般都是用来传递某个唯一的值,比如详情或编辑的id

第二种传参方式,search传参
通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url

<Link to='/home?name=dx'>首页</Link>

在这里插入图片描述
如果想真正获取到传递过来的参数,需要在对应的子组件中

this.props.location.search 

获取字符串,再手动解析

或者

this.props.location.query

优点:
1、‘传参和接收都比较简单’
2、刷新页面参数不会丢失
3、可以传递多个参数
缺点:
1、‘当复杂数据对象或数组需要传参时,这样做比较麻烦,需要通过json字符串的方式进行处理’
2、参数会出现在url上,不够安全

第三种传参方式,隐式路由state传参

<Link to={ 
   { 
   
          pathname: 'about',
          state: { 
   
            name: 'dx'
          }
        }}>关于</Link>

所谓隐式路由传参,就是传参的信息不回暴露在url中,当点击该link标签,想要获取到传递的参数,就在对应的路由组件中,通过

this.props.location.state

获取即可

优点:
1、‘传参和接收都比较简单’
2、可以传递多个参数
3、传递对象数组等复杂参数方便
4、不会暴露给用户,比较安全
缺点:
1、如果手动刷新当前路由时,数据参数有可能会丢失!!!’
在react中,最外层包裹了BrowserRouter时,不会丢失,但如果使用的时HashRouter,刷新当前页面时,会丢失state中的数据

第四种传参方式 组件间传参

何时使用?
当一个路由组件需要接收来自父组件传参的时候

改造route标签通过component属性激活组件的方式
正常情况下的route标签在路由中的使用方式

//简洁明了,但没办法接收来自父组件的传参
<Route path='/test' component={ 
   Test}></Route>

改造之后

<Link to='/test'>测试</Link>
<Route path='/test' render={ 
   (routeProps) => { 
   
		//routeProps就是路由组件传递的参数
          return (
          //在原先路由组件参数的情况,扩展绑定父组件对子组件传递的参数
            <Test { 
   ...routeProps} name='dx' age={ 
   18} />
          )
 }}></Route>	

当点击link标签时,通过在对应的test子组件中,this.props获取来自父组件传递的参数和路由组件自带的参数
强烈推荐,传递参数略微有些麻烦,接收参数十分方便,并且仍然可以接收路由组件自带的参数,安全,不会被用户看见

最后一种传参方式 withRouter 高阶组件给子组件绑定路由参数

withRouter 何时使用?
想要在某个子组件中获取路由的参数,必须得使用路由中的route标签的子组件才能被绑定上路由的参数。

为了解决不通过route标签绑定的子组件获取路由参数的问题,需要使用withRouter

一般用在返回首页,返回上一级等按钮上

import React from 'react';
import BackHome from './backhome';
export default class Test extends React.Component { 
   
  render () { 
   
    console.log(this.props)
    return (
      <div>
        这是测试的内容
//返回首页的按钮不是通过route标签渲染的,所以该子组件的this.props中没有路由参数
        <BackHome>返回首页</BackHome> 
      </div>
    )
  }
}
import React from 'react';
//导入withRoute
import { 
   withRouter} from 'react-router-dom';
class BackHome extends React.Component { 
   
  goHome = () => { 
   
  	//必须在使用withRouter的情况下,该组件在this.props中才有路由参数和方法
  	//否则,会报错
    this.props.history.push({ 
   
      pathname: '/home',
      state: { 
   
        name: 'dx' //同样,可以通过state向home路由对应的组件传递参数
      }
    })
  }
  render () { 
   
    return (
      <button onClick={ 
   this.goHome}>this.props.children</button>
    )
  }
}
//导出的时候,用withRouter标签将backHome组件以参数形式传出
export default withRouter(BackHome)

当你需要使用的时候,就很重要,所以还是比较推荐。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132263.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 世界地图行政区划图_世界行政区划图册

    世界地图行政区划图_世界行政区划图册序号 国家 省 城市 4007 法国 上法兰西大区   4008 法国 上法兰西大区 万格勒 4009 法国 上法兰西大区 乌普利讷 4010 法国 上法兰西大区 于吕什 4011 法国 上法兰西大区 代兰库尔 4012 法国 上法兰西大区 代夫勒 4013 法国 上法兰西大区 伊夫里莱唐普尔 4014 法国 上法兰西大区

  • java中判断字符串是否日期格式的方法建议收藏

    大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。此处内容已经被作者隐藏,请输入验证码查看内容验证码:请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“…

  • C#中Dock属性的作用[通俗易懂]

    C#中Dock属性的作用[通俗易懂]当在C#项目开发中,在窗体界面的设置经常用到Dock属性值。这里一panel面板的Dock属性值为例描述其作用。当容器中的控件的Dock属性设置为Fill时,可能会覆盖其他Dock属性为Top,Bottom,Right,Left的控件。为了避免出现覆盖现象,可以将被覆盖的控件置于底层就可以(在panel面板上“右键”–“置于底层”),如下图所示。应用Dock时,越是底层的控件,其优先级越高。

  • 如何搭建自己的git服务器_git 创建远程仓库

    如何搭建自己的git服务器_git 创建远程仓库GitHub,Gitee想来大家都用过,我们的代码就是托管在这些平台上的。因此,你可能好奇为什么我们不自己大家一个git服务器呢?下面,就开始教大家如何一步步搭建自己的git服务器(试验成功的那一刻还是很让人激动的)。我自己的虚拟机是centOS7的,首先肯定要安装git和git-daemon,可以使用自带的yum进行安装。yuminstall-ygityuminstall-ygit-daemon虚拟机服务端创建git目录[root@ma.

  • 华为HarmonyOS开发者日(华为手机的开发者选项在哪里)

    今年9月的华为开发者大会HDC2020上,华为发布了面向全场景的分布式操作系统HarmonyOS2.0。这款操作系统一经发布便获得了业内的热切关注,在开源社区更是掀起了一股讨论的热潮。…

  • CNN 卷积神经网络结构

    CNN 卷积神经网络结构CNNcnn每一层会输出多个featuremap,每个FeatureMap通过一种卷积滤波器提取输入的一种特征,每个featuremap由多个神经元组成,假如某个featuremap的shape是m*n,则该featuremap有m*n个神经元。对于卷积层会有kernel,记录上一层的featuremap与当前层的卷积核的权重,因此kernel的shape为(上一层feature

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号