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

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

<Router history={hashHistory}>
   <Route path="/home" getComponent={Home} />
   <Route path="rank/:Id" component={rank}/>
   <Route path="*" getComponent={Home} />
</Router>

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

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

<Router history={hashHistory}>
   <Route path="/details(/:released)/uid(/:uid)/page(/:page)" component={Detail} />
    <Route path="/home" component={Home} />
  <Route path="*" component={Home} />
</Router>

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

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

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

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

<Link to = {{pathname:"category/"+cate._id,query:{name:cate.name}}} >
    <i className = "cateIcon iconfont" dangerouslySetInnerHTML = {{__html:(cate.icon)}}/>
    <span className = "cateContent">{cate.name}</span>
</Link>

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

其实，

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

而且可以传递一个对象

<Router history={hashHistory}>
   <Route path="/home" getComponent={Home} />
   <Route path="/rank" getComponent={Rank} />
   <Route path="*" getComponent={Home} />
</Router>

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

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

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

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

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

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