react router @4 和 vue路由 详解(五)react怎么通过路由传参

  • Z时代
  • 2024-01-10
  • 分类：综合

react

完整版：https://www.cnblogs.com/yangyangxxb/p/10066650.html

7、react怎么通过路由传参？

　　a、通配符传参(刷新页面数据不丢失)

//在定义路由的时候
<Route path='/path/:自己起个名字' component={Path}/>
//在路由点击跳转的时候
<Link to="/path/你要传的参数">通配符</Link>
//另一个页面接收传来的参数
this.props.match.params.你起的名字

　　

　　     举个????

　　     

　　　  另一个页面接收值的时候：

　　　　　　　　this.props.match.params.id

　　b、query传参(刷新页面数据丢失)

//路由定义
<Route path='/query' component={Query}/>
//跳转的时候
var query = {
        pathname: '/query',
        query: '我是通过query传值 '
}
<Link to={query}>query</Link>
//另一个页面使用的时候
this.props.location.query
这里的this.props.location.query === '我是通过query传值'

　　c、state传参(刷新页面数据丢失，同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的) 

//Route定义
<Link to={state}>state</Link>
//使用的时候
    var state = {
        pathname: '/state',
        state: '我是通过state传值'
    }
    <Route path='/state' component={State}/>
//另一个页面获取值的时候
this.props.location.state
这里的this.props.location.state === '我是通过query传值'

　　d、路由？传参数

           

　　　  此处的foodmenu通过路由？后面传参数

　　　  在另一个页面的this.props.location.search可以获取到 "?id=6" 

以上是 react router @4 和 vue路由 详解(五)react怎么通过路由传参 的全部内容， 来源链接： utcz.com/z/382933.html

回到顶部