react 路由参数、函数式跳转

1.参数传递

params传参

xxx
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name

query传参

刷新参数会丢失

this.props.history.push({pathname:"/path",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name

state传参

刷新不会丢失

 
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
获取参数用: this.props.location.state.name 

search传参

和原生js获取到一样 需要解析对应参数

xxx
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