react路由系列05___路由传值之state

本文基于react路由系列前两篇文章,介绍react路由传参中通过state传参的方式。与query传参类似但属性不同,state传参加密。文中详细说明了传值和获取值的方法,并给出GoodsList.js、Pencil.js、Eraser.js的代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

此篇文章是基于 react路由系列01___ 在react脚手架里使用React-router(简单入门)和 react路由系列02___ 二级路由 上写的,如果你有路由基础,可以直接看这篇文章,如果没有路由基础,则建议先看前两篇文章。

react路由传参(组件之间传值)_通过query

React路由传参的三种方式

三、通过state(以GoodsList.js为例

      同query差不多,只是属性不一样,而且state传的参数是加密的,query传的参数是公开的,在地址栏。只需要把query改为state即可。

解释:组件之间传递参数时,一般都是键值对的方式,如:username=tianwater。

 Query的方式不用配置路由表。只改Link(Navlink)标签处就行

    1、传值(需要修改两个地方):
          1)、 Link(NavLink)处 (键值对全在此处写)       

              给Link标签的to属性赋的值是个location对象。Location对象包括pathname属性和query属性。

<Link to={{pathname:'/gla/Pencil',state:{id:'01009'}}} >铅笔</Link>

<Link to={{pathname:'/gla/Eraser',state:{name:'橡皮01'}}} >橡皮01</Link>

    2、获取值:
            1)、在“Pencil.js”里

                   商品编号:{this.props.location.state.id}<br/>

           2)、在“Eraser.js”里

                 商品名称:{this.props.location.state.name}<br/>

 

PS:经过以上的更改后,文件“GoodsList.js”,“Pencil.js”,“Eraser.js”的代码分别为(可以复制以下代码):

1)、GoodsList.js文件:

import React, { Component } from 'react';

import { BrowserRouter, Route,NavLink} from 'react-router-dom';

import Pencil from './Pencil';

import Eraser from './Eraser';

 

class GoodsList extends Component{

render(){

return (

<BrowserRouter>

<div>欢迎来到商品列表页面</div><br/>

<Link to={{pathname:'/gla/Pencil',state:{id:'01009'}}} >铅笔</Link>

  | 

<Link to={{pathname:'/gla/Eraser',state:{name:'橡皮01'}}} >橡皮01</Link>

<hr/>

<Route path='/gla/Pencil' component={Pencil} />

<Route path='/gla/Eraser' component={Eraser} /> 

</BrowserRouter>

)

}

}

export default GoodsList;

2)、Pencil.js文件:

import React,{Component} from 'react';

class Pencil extends Component{

render(){

return (

<div>

商品编号:{this.props.location.state.id}<br/>

商品名称:铅笔<br/>

商品描述:铅笔好,铅笔好,铅笔写错还可以擦掉<br/>

</div>

)

}

}

export default Pencil;

 

3)、Eraser.js文件:

import React, { Component } from 'react';

class Eraser extends Component{

render(){

return (

<div>

商品编号:01002<br/>

商品名称:{this.props.location.state.name}<br/>

商品描述:橡皮好,橡皮好,橡皮可以擦掉铅笔写<br/>

</div>

)

}

}

export default Eraser;

ok,三种传值方式搞定

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值