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

桃扇骨 2021-12-11 03:59 580阅读 0赞

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

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

[React路由传参的三种方式][React]：

### **二、通过query（以GoodsList.js为例）** ###

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

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

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

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

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

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

2、获取值：  
            1）、在“Pencil.js”里

商品编号：\{this.props.location.query.id\}<br/>

2）、在“Eraser.js”里

商品名称：\{this.props.location.query.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',query:\{id:'01009'\}\}\} >铅笔</Link>

|

<Link to=\{ \{pathname:'/gla/Eraser',query:\{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.query.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.query.name\}<br/>

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

</div>

)

\}

\}

export default Eraser;

ok，第二种方式大功告成！

下一篇是[第三种方式：state][state]

[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
[state]: https://blog.csdn.net/jiang7701037/article/details/95409198

发表评论取消回复

表情：

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

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

相关阅读

相关 React路由传值操作

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

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

相关 vue路由传值params，query之踩坑系列

vue路由传值params，query之踩坑系列 vue路由传值 > `this.$router.push({name:xx,params:{id:xx}})`,或者另

你的名字/ 2023年01月15日 10:24/ 0 赞/ 156 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 vue路由传值

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

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

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

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

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

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

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

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