1.动态路由传参
描述
- 显示在地址栏上
- 刷新不会修丢失
- 不可传复杂数据类型
- 只可传递一个数据
路由配置
<Route path='MyDocument/:id' element={ <MyDocument/> }></Route>
传参
this.props.navigate(path + '/123')
取参
let params = useParams() // { id: '123' }
2.search传递参数
描述
- 显示在地址栏上
- 刷新不会丢失
- 不可传复杂数据类型
- 可传递多个键值对
传参
this.props.navigate(path + '?name=freeman&time=' + new Date().getTime())
取参
const searchParams = Object.fromEntries(this.props.searchParams)
console.log(searchParams) // { name: 'freeman', time: '1706621562950' }
3.state传递参数
描述
- 不会显示在地址栏上
- 刷新不会丢失
- 可传递复杂数据类型
- 可传递多个键值对
传参
this.props.navigate(path,{
state:{
name: 'freeman',
time: new Date().getTime()
}
})
取参
let location = useLocation()
console.log(location.state) // {name: 'freeman', time: 1706622018604}
-
注意:此时路由上不能有动态传参时的参数占位,否则无法跳转;