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

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

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

React路由传参的三种方式：

三、通过state（以GoodsList.js为例）

      同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏。只需要把query改为state即可。

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

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

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

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

state:{id:'01009'}}} >铅笔

state:{name:'橡皮01'}}} >橡皮01

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

                   商品编号：{this.props.location.state.id}

           2）、在“Eraser.js”里

                 商品名称：{this.props.location.state.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 (

欢迎来到商品列表页面

state:{id:'01009'}}} >铅笔

  | 

state:{name:'橡皮01'}}} >橡皮01

---

 

)

}

}

export default GoodsList;

2）、Pencil.js文件：

import React,{Component} from 'react';

class Pencil extends Component{

render(){

return (

商品编号：{this.props.location.state.id}

商品名称：铅笔

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

)

}

}

export default Pencil;

 

3）、Eraser.js文件：

import React, { Component } from 'react';

class Eraser extends Component{

render(){

return (

商品编号：01002

商品名称：{this.props.location.state.name}

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

)

}

}

export default Eraser;

ok，三种传值方式搞定