美文网首页
路由传参

路由传参

作者: lovelydong | 来源:发表于2019-11-13 15:38 被阅读0次

    1.params

    <Route path='/path/:name' component={Path}/>
    <link to="/path/2">xxx</Link>
    this.props.history.push({pathname:"/path/" + name});
    读取参数用:this.props.match.params.name
    

    2.query

    <Route path='/query' component={Query}/>
    <Link to={{ path : '/query' , query : { name : 'sunny' }}}>
    this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
    读取参数用: this.props.location.query.name
    
    

    3.state

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

    4.search

    <Route path='/web/search ' component={Search}/>
    <link to="web/search?id=12121212">xxx</Link>
    this.props.history.push({pathname:`/web/search?id ${row.id}`});
    读取参数用: this.props.location.search
    
    

    优缺点:

    1.params和 search 只能传字符串,刷新页面参数不会丢
    2.query和 state 可以传对象,但是刷新页面参数会丢失

    相关文章

      网友评论

          本文标题:路由传参

          本文链接:https://www.haomeiwen.com/subject/yiahictx.html