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

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

 

React路由传参的三种方式：

一、通过params（以GoodsList.js为例）

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

    1、传值(需要修改两个地方)：

          1）、路由表中（写键名）

                <Route path='/gla/Pencil/:id' component={Pencil} />

                 <Route path='/gla/Eraser/:name' component={Eraser} />

 

           2）、 Link（NavLink）处 （写键对应的值）       

                 <NavLink to={'/gla/Pencil/'+'01008'} >铅笔</NavLink>

                <NavLink to='/gla/Eraser/橡皮02' >橡皮</NavLink>

    2、获取值：

            1）、在“Pencil.js”里

 

                            商品编号：{this.props.match.params.id}<br/>

           2）、在“Eraser.js”里

                          商品名称：{this.props.match.params.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/>

<NavLink to={'/gla/Pencil/'+'01008'} >铅笔</NavLink>

  | 

<NavLink to='/gla/Eraser/橡皮02' >橡皮</NavLink>

<hr/>

<Route path='/gla/Pencil/:id' component={Pencil} />

<Route path='/gla/Eraser/:name' component={Eraser} />

 

</BrowserRouter>

)

}

}

export default GoodsList;

2）、Pencil.js文件：

import React,{Component} from 'react';

class Pencil extends Component{

render(){

return (

<div>

商品编号：{this.props.match.params.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.match.params.name}<br/>

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

</div>

)

}

}

export default Eraser;

 

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

下一篇是第二种方式：通过query的方式