react-router-dom 路由传参

2019-06-02  本文已影响0人  无疆wj

1 路由动态参数

路由定义

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

Link定义

<Link to="/component/10">toComponent</Link>

Component 组件中接收参数

this.props.match.params.id // id == 10

2 Link组件 to:String

路由定义(一般定义规则)

<Route path="/" component={Component} />

Link定义

<Link to="/?sort=name">Zillow Group</Link>

Component 组件中接收参数

this.props.location.search // search == "?sort=name"

3 Link组件 to:Object

路由定义(一般定义规则)

<Route path="/component" component={Component} />

Link定义

let obj = {
  pathname: '/component',
  search: '?sort=name',
  query: { fromDashboard: 123 },
  state: { fromDashboard: 123 }
}
<Link to="{obj}">Zillow Group</Link>

Component 组件中接收参数

this.props.location.search // search == "?sort=name"
this.props.location.query // query == { fromDashboard: 123 }
this.props.location.state // state == { fromDashboard: 123 }

注意:
1 query 在页面刷新后 会消失
2 query 和 state都是隐式传递

上一篇 下一篇

猜你喜欢

热点阅读