React路由传参

params参数

父组件

<li key={msgObj.id}>
	/* 向路由组件传递params参数 */
	<Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
</li>
/* 声明接收params参数 */
<Route path="/home/message/detail/:id/:title" component={Detail}/>

接收参数

const {id,title} = this.props.match.params

search参数

<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>

{/* search参数无需声明接收，正常注册路由即可 */}
<Route path="/home/message/detail" component={Detail}/>

接收

//导入qs
import qs from 'querystring'

// 接收search参数
const {search} = this.props.location
//将？去除
const {id,title} = qs.parse(search.slice(1))

state参数

<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>

<Route path="/home/message/detail" component={Detail}/>

接收

// 接收state参数
const {id,title} = this.props.location.state