关注互联网应用及运维技术的个人博客

react-router路由传参数

1、 使用props.params 传值

<Route path="/path/:id" component={App} />

//Link组件,路由跳转,类似于a标签
<Link to="/path/id">list</Link>

//子组件中获取参数
this.props.match.params.id

如果需要传对象的话,可先将对象转化为字符串(使用JSON.stringify(str)将对象转化为字符串,在子组件中再将字符串转化为对象),参数太多时,URL变长

2、使用query定义传值方式

<Route path="/query" component={App} />

//在Link组件中定义参数

const param ={
    pathname:"/query",
    query:"参数"
}

<Link to={param}>List</Link>

//在子组件中获取参数值

this.props.location.query

这种方式,可以直接传对象,单但是页面刷新后,参数丢失

3、state传值方式,和query相似:

<Route path="/state component={App} />

//在Link组件中定义参数

const param ={
    pathname:"/state",
    state:"参数"
}

<Link to={param}>List</Link>

//在子组件中获取参数值
this.props.location.state

可传对象,页面刷新,参数丢失。

react路由设置中,除了标签以外,还有一个this.props.history.push,设置落雨跳转和传值:

第一种方式:在父组件中,设置路由标签:

<Link to="/about/:id">About</Link>

第二种方式:在父组件中,设置点击事件:

<div onClick={this.click.bind(this)}>About</div>

//js
click(){
    this.props.history.push({ pathname: "/about", state: { id } });
}

子组件中获取参数

this.props.location.state.id
赞(0)
未经允许不得转载:飞天狒狒 » react-router路由传参数

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址