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

问题描述

问 题

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

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

解决方案

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

例如在A中做跳转：

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

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

这篇关于react.js - React-router中如何优雅地传复杂的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！