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

Cocbin
  • 1.5k

在使用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编码,这显然不优雅啊。

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

回复
阅读 9.6k
3 个回答
✓ 已被采纳

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

例如在A中做跳转:

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

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

你知道吗?

宣传栏