router4+跳转的数据传递

react+react-router的搭配用起来确实爽。router4提供了很多强大的功能。这里记录一下通过router实现的页面间的数据传输：
共有一下三种方法：

• 利用 params传递

//定义路由
<Route path="/detail/:userId/:userName" component={User} />

//通过js实现页面跳转
this.props.history.push(`/detail/${userId}/${userName}`)
//以上是es6中模板字符串的写法。uesrId和userName都是一个变量。渲染到页面，浏览器的url可能就是  ’/detail/111/张三‘

新页面获取变量。假设url为 ’/detail/111/张三‘

//router4以下的获取方法
let {userId,userName}=this.props.params   //userId="111"   userName="张三"

//router4的获取方法
let {userId,userName}=this.props.match.params   //userId="111"   userName="张三"

• 利用query传递

//定义路由
<Route path="/detail" component={User} />

//js页面跳转
this.props.history.push({
	pathname:'/detail',
	query:{
		userId:"123",
		userName:"张三"
	}
})
//这种方法在页面url中显示为 ’/detail‘  不会把参数放到url中

//新页面获取
let {userId,userName}=this.props.location.query   //userId="123"   userName="张三"

• 利用state传递

//定义路由
<Route path="/detail" component={User} />

//js页面跳转
this.props.history.push({
	pathname:'/detail',
	state:{
		userId:"123",
		userName:"张三"
	}
})
//这种方法在页面url中显示为 ’/detail‘  不会把参数放到url中

//新页面获取
let {userId,userName}=this.props.location.state   //userId="123"   userName="张三"

总结
以上三种方法都可以实现数据传输。但是有以下区别：

1. params会把数据放到url中。而另外两种不会。也就是说，当传输字段比较多的时候，第一种就有些不适用了；
2. state和query看起来用法几乎一样。但是官方解释说，query会明文传输，state则会加密传输。但是所有的数据在url中都不会出现。所以安全性不是那么高的。query就可以满足了。