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

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

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

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