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

Question

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

<Route path = "/category" component = {Category}>
    <Route path = ":id" component = {CategoryDetail}/>
</Route>

这样子我们就能传递id参数了。
但是有时候参数比较复杂，
看了一下官方的example，里面可以使用query进行参数的传递，
像这样：

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

这样就可以传跟多参数了。

但是这样就有个问题了，这样传参数是通过url来传的，特就是说在浏览器地址栏中能显示出来的，
而有时候我们传的参数是中文的，这样就会导致url出现一长串乱七八糟的如 “%22%33”这样的的url编码，这显然不优雅啊。

我的问题是，有什么方式能够更优雅地传递参数吗？甚至直接可以传递一个对象。

Answer 1

如果是用跳转来达到传递信息，可以使用state来保存。

例如在A中做跳转：

jumpNextLink(link) {
    const { history } = this.props;
    histroy.push({ pathname: link, state: { ...whatever } });
}

在下个组件的location中的state就可以收到，而且它不会出现在地址栏里。

Answer 2

你可以通过state来传递啊 可以这样写

<Link to={{pathname:link,state:data}}>

那么路由link里面的this.props.location.state就是这个data
你可以console出来自己看一下 这个data不会被放在url上显示

Answer 3

怎么用啊，看完还是不懂啊