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属性。
{{pathname:'/gla/Pencil',query:{id:'01009'}}} >铅笔
{{pathname:'/gla/Eraser',query:{name:'橡皮01'}}} >橡皮01
2、获取值：
1）、在“Pencil.js”里
商品编号：{this.props.location.query.id}
2）、在“Eraser.js”里
商品名称：{this.props.location.query.name}
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 (
{{pathname:'/gla/Pencil',query:{id:'01009'}}} >铅笔
|
{{pathname:'/gla/Eraser',query:{name:'橡皮01'}}} >橡皮01
)
}
}
export default GoodsList;
2）、Pencil.js文件：
import React,{Component} from 'react';
class Pencil extends Component{
render(){
return (
商品编号：{this.props.location.query.id} 商品名称：铅笔 商品描述：铅笔好，铅笔好，铅笔写错还可以擦掉
)
}
}
export default Pencil;
3）、Eraser.js文件：
import React, { Component } from 'react';
class Eraser extends Component{
render(){
return (
商品编号：01002 商品名称：{this.props.location.query.name} 商品描述：橡皮好，橡皮好，橡皮可以擦掉铅笔写
)
}
}
export default Eraser;
ok，第二种方式大功告成！
下一篇是第三种方式：state