react router6路由传参

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}

• 注意：此时路由上不能有动态传参时的参数占位，否则无法跳转；