共计 928 个字符，预计需要花费 3 分钟才能阅读完成。

params 参数

• 路由链接（携带参数）：

{/* 传递 params 参数 */}
<Link to={`/home/message/dateil/Joe/18`}>详情</Link>

• 注册路由（声明接收）：

{/* 声明接收 params 参数 */}
<Route to='/home/message/detail/:name/:age' component={Detail} />

• 接收参数

// 路由组件接收 params 参数
this.props.match.params // {name:'Joe', age: '18'}

search 参数

• 路由链接（携带参数）：

{/* 传递 search 参数 */}
<Link to={`/home/message/dateil/?name=Joe&age=18`}>详情</Link>

• 注册路由（无需声明，正常注册即可）：

{/* search 参数无需声明接收 */}
<Route to='/home/message/detail' component={Detail} />

• 接收参数：

// 路由组件接收 search 参数
const { search } = this.props.location // "?name=Joe&age=18"

// 由于接收到的 search 参数是 urlencoded 编码字符串，不利于使用，需要借助 querystring 解析 search 参数
// 导入 querystring 库 parse() stringify() 
import qs from 'qs'
const { name, id } = qs.parse(search.slice(1))

state 参数

• 路由链接（携带参数）：

{/* 传递 state 参数 */}
<Link to={{pathname:'/home/message/dateil/', state:{name: 'Joe', age: 18}}>详情</Link>

• 注册路由（无需声明，正常注册即可）：

{/* state 参数无需声明接收 */}
<Route to='/home/message/detail' component={Detail} />

• 接收参数：

// 路由组件接收 state 参数
this.props.location.state // {name:'Joe', age: 18}

刷新也可以保留住参数