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

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

React路由传参的三种方式 ：

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

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

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

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

给Link标签的to属性赋的值是个location对象。 L ocation对象包括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>

<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 (

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

商品名称：铅笔<br/>

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

export default Pencil;

3）、Eraser.js文件：

import React, { Component } from 'react';

class Eraser extends Component{

render(){

return (

商品编号：01002<br/>

商品名称：{ this.props.location.query.name }<br/>

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

export default Eraser;

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

下一篇是 第三种方式：state