React路由传参

您好，如果你看到这篇文章，不知可否留下您宝贵的意见！！！

当我们要进行跳转的时候，通常会把一些参数传到另一个组件上去，以便跳转到的组件可以轻而易举的拿到参数。通常通过params、query、state以及search这四种方法进行传参，接下来让我给你们演示一下：

1.Params

<Route path='/path/:id' component={Path}/> //path指路径;component指所跳转的组件
<link to="/path/otherRouter">你好！我是跳转到的路由</Link>
this.props.history.push({pathname:"/path/" + id});
读取参数用:this.props.match.params.id

优势：当刷新地址栏的时候，参数依旧存在。
缺点：只能传字符串，当传的值过多的话，会显得url变得长并且丑陋。

query

<Route path='/query' component={Query}/>
<Link to={{ path : ' /query' , query : { age: 11 }}}> //pash是路径，query是参数
this.props.history.push({pathname:"/query",query: { age: 11 }});
读取参数用: this.props.location.query.age

优点：可以传对象并且变得更优雅。
缺点：不能刷新地址栏，不然参数会丢失。

state

<Route path='/sort ' component={Sort}/>
<Link to={{ path : ' /sort ' , state : { age: 11 }}}> 
this.props.history.push({pathname:"/sort ",state : { age: 11 }});
读取参数用: this.props.location.query.state 

优缺点和query相同

search

<Route path='/router/searchRouter' component={SearchRouter}/>
<link to="/router/searchRouter?id=12138">xxx</Link>
this.props.history.push({pathname:"/router/searchRouter?id" + id});
读取参数用: this.props.location.search

优缺点和params相同

中国加油！武汉加油！

千峰逆战