React-router中如何优雅地传复杂的参数

在使用react-router的时候，当我们需要传递一个参数时，
我们都会在路由中这样定义：

这样子我们就能传递id参数了。
但是有时候参数比较复杂，

例如我要传递多个参数的时候，或者传递一个对象

像这样，可能要去传递多少个参数，每添加一个参数都要在路由的配置中添加一次

而且在子路由中查找参数，常常会把自己搞晕，不知道那个参数是什么，

还有这样是不可以传递对象的哦！

看了一下官方的示例，里面可以使用query进行参数的传递，
像这样：

    
    {cate.name}

但是这样在URL上会有长一串的信息，

其实，

我们可以使用路由中state的属性，进行参数的传递，

而且可以传递一个对象

在路由的配置时，不需要配置参数，在开发中减少了配置的麻烦，也避免把自己搞晕

let path = {
   pathname:'/rank',
   state:data,
}
hashHistory.replace(path)

需要注意的是虽然push的是一个对象，但需要再构造，不可直接写入

hashHistory.replace({pathname:'/rank',state:data})
这样是不可以的

这样在URL上的参数不仅会变短，

还会被加密，

而且可以传递对象

最终的URL是这样子的：

在子路由获取参数

this.props.location.state

这里的state就是我们传递的参数

如果参数个对象也可以使用

this.props.location.state.name

可以直接获取你要的对象下的属性

这样传递参数是不是很方便那！

但是这样使用路由是需要从主页面进入到子页面中的，

所以需要单独打开当前子页面的情况不适用此方法