react路由传参params、search、state

params

传参：

链接: <NavLink to='/layout/home/message/1'>Message<NavLink>
函数式：this.props.history.push('/layout/home/message/1')

声明：

<Route path='/layout/home/message/:id' component={Message}></Route>

接收：

this.props.match.params.id

search

传参：

链接: <NavLink to='/layout/home/message/?name=zhang&age=20'>Message<NavLink>
函数式：this.props.history.push('/layout/home/message/?name=zhang&age=20')

声明：

<Route path='/layout/home/message' component={Message}></Route>

接收：

import qs from 'qs'
let { name, age } = qs.parse(this.props.location.search.slice(1))

state

传参：

链接: <NavLink to={{pathname:'/layout/home/message',state:{name:'zhang'}}}>Message<NavLink>
函数式：this.props.history.push({pathname:'/layout/home/message',state:{name:'zhang'}})

声明：

<Route path='/layout/home/message' component={Message}></Route>

接收：

this.props.location.state.name

总结：使用HashRouter时刷新浏览器state参数会丢失，BrowserRouter不会。