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
query传参
刷新参数会丢失
<Route path='/path' component={component}/>
<Link to={{ path : ' /path' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/path",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name
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.state.name
search传参
和原生js获取到一样 需要解析对应参数
<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?test=123"});
读取参数用: this.props.location.search.test //?test=123
2.函数式跳转页面
push
参数 path,state
replace
参数 path,state
go
goBack
goForward
this.props.history.push({pathname:'/list',state:{a:'123'})
this.props.history.push('/list')
this.props.history.go(-1)
3.在子组件中跳函数式转页面
引入withRouter
提供了history