共计 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}
刷新也可以保留住参数
正文完