0

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

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

Cocbin 1.5k
2016-03-08 提问

查看全部 3 个回答

14

已采纳

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

例如在A中做跳转:

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

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

1

这种方法行嘛?我用了之后在this.props.location.state中获取的数据为null,我传的时候是this.props.history.push({pathname:'/userEdit',state:this.state.data});这种方式

skinner1990 · 2016-05-11

展开评论

推广链接