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

心已赠人 2021-12-11 04:02 350阅读 0赞

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

## **react路由传参（组件之间传值）\_通过query** ##

[React路由传参的三种方式][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，三种传值方式搞定

[react_01_ _react_React-router]: https://blog.csdn.net/jiang7701037/article/details/95222851
[react_02_]: https://blog.csdn.net/jiang7701037/article/details/95400261
[React]: https://www.cnblogs.com/houjl/p/10056718.html

发表评论取消回复

表情：

评论列表（有 0 条评论，350人围观）

还没有评论，来说两句吧...

相关阅读

相关 React路由传值操作

1》通过id形式传值传值： <Link to='/news/张三'>新闻</Link> 路由中： path='/news/:id'

╰半橙微兮°/ 2023年03月06日 03:22/ 0 赞/ 14 阅读

相关 AngularJS路由 $state服务、路由事件、获取路由参数

1 ui-sref、$state.go 的区别 ui-sref 一般使用在 …； <a ui-sref="message-list">消息中心</a> $st

àì夳堔傛蜴生んèń/ 2022年06月17日 04:43/ 0 赞/ 282 阅读

相关 vue路由传值与路由跳转

一、用name传递参数两步完成用name传值并显示在模板里： 1. 在路由文件src/router/index.js里配置name属性。

迷南。/ 2022年05月28日 12:57/ 0 赞/ 324 阅读

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

此篇文章是基于 [react路由系列01\_\_\_ 在react脚手架里使用React-router(简单入门)][react_01_ _react_React-route

心已赠人/ 2021年12月11日 04:02/ 0 赞/ 351 阅读

相关 react路由系列04___路由传值之query

此篇文章是基于 [react路由系列01\_\_\_ 在react脚手架里使用React-router(简单入门)][react_01_ _react_React-route

桃扇骨/ 2021年12月11日 03:59/ 0 赞/ 571 阅读

相关 react路由系列03___路由传值之params

此篇文章是基于 [react路由系列01\_\_\_ 在react脚手架里使用React-router(简单入门)][react_01_ _react_Reac

╰+攻爆jí腚メ/ 2021年12月11日 03:53/ 0 赞/ 312 阅读

相关 react路由系列02___ 二级路由

一、经过文章“[react路由系列01\_\_\_ 在react脚手架里使用React-router(简单入门)][react_01_ _react_React-router]

墨蓝/ 2021年12月11日 03:49/ 0 赞/ 431 阅读

相关 vue路由传值

1）通过动态路由方式 //路由配置文件中配置动态路由 { path: '/detail/:id',

╰半橙微兮°/ 2021年10月19日 11:52/ 0 赞/ 361 阅读

相关 vue路由传值与路由跳转

一、用name传递参数两步完成用name传值并显示在模板里： 1. 在路由文件src/router/index.js里配置name属性。

忘是亡心i/ 2021年09月16日 13:04/ 0 赞/ 602 阅读

相关 uniapp - 路由跳转及路由传值

uniapp 中路由跳转一. 使用 navigator 组件跳转（无参数）二. 调用 API 编程式跳转跳转（无参数） 1. uni.navi

灰太狼/ 2021年07月25日 12:29/ 0 赞/ 1529 阅读