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

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

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

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

如果想真正获取到传递过来的参数,需要在对应的子组件中
this.props.location.search 获取字符串,再手动解析

因为传参能够被用户看见,传递获取比较麻烦,所以不推荐

第二种传参方式,隐式路由传参

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

所谓隐式路由传参,就是传参的信息不回暴露在url中,当点击该link标签,想要获取到传递的参数,就在对应的路由组件中,通过this.props.location.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)

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

到此这篇关于浅谈react路由传参的几种方式的文章就介绍到这了,更多相关react路由传参内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-03-20

详解React路由传参方法汇总记录

React中传参方式有很多,通过路由传参的方式也是必不可少的一种. 本文记录项目中会用到的路由传参方式: 路由跳转传参API + 目标路由获取参数的方式. 一.动态路由 跳转方法 Link <Link to={{ pathname: "/user/add/1" }}>跳转新增页面</Link> history.push this.props.history.push("/user/add/1"); 获参方法 this.props.match.

详解Angular5 路由传参的3种方法

本文介绍了Angular5 路由传参,一共3种方法.分享给大家,具体如下: 1.问号后面带的参数,获取参数的方式:ActivatedRoute.queryParams[id] 例如:/product?id=1&name=iphone还可以是: [ routerLink]= "['/books']" [ queryParams]= "{bookname:'<活着>'} 代码:html <h4>Messages</h4> <p&g

详解python函数传参是传值还是传引用

首先还是应该科普下函数参数传递机制,传值和传引用是什么意思? 函数参数传递机制问题在本质上是调用函数(过程)和被调用函数(过程)在调用发生时进行通信的方法问题.基本的参数传递机制有两种:值传递和引用传递. 值传递(passl-by-value)过程中,被调函数的形式参数作为被调函数的局部变量处理,即在堆栈中开辟了内存空间以存放由主调函数放进来的实参的值,从而成为了实参的一个副本.值传递的特点是被调函数对形式参数的任何操作都是作为局部变量进行,不会影响主调函数的实参变量的值. 引用传递(pass-

Vue-CLI项目中路由传参的方式详解

一.标签传参方式:<router-link></router-link> 第一种 router.js { path: '/course/detail/:pk', name: 'course-detail', component: CourseDetail } 传递层 <!-- card的内容 { id: 1, bgColor: 'red', title: 'Python基础' } --> <router-link :to="`/course/detail

vue路由传参三种基本方式详解

这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

3种vue路由传参的基本模式

路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { // 直接调用$

详解React项目的服务端渲染改造(koa2+webpack3.11)

因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料.成功踩坑. 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用NEXT框架来写 项目地址:https://github.com/wlx200510/react_koa_ssr 脚手架选型:webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要

详解vue 路由跳转四种方式 (带参数)

1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

详解React 元素渲染

元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容. const element = <h1>Hello, world!</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致. 将元素渲染到 DOM 中 首先我们在一个 HTML 页面中添加一个 id="example" 的 <div>: <div id="

详解vue路由

前端路由和后端路由: 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由 路由的使用 1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函

详解React 16 中的异常处理

详解React 16 中的异常处理 异常处理 在 React 15.x 及之前的版本中,组件内的异常有可能会影响到 React 的内部状态,进而导致下一轮渲染时出现未知错误.这些组件内的异常往往也是由应用代码本身抛出,在之前版本的 React 更多的是交托给了开发者处理,而没有提供较好地组件内优雅处理这些异常的方式.在 React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃:未被任何异常边界捕获的异常可能会导致