react router6路由传参

原创已于 2024-02-28 10:25:01 修改 · 507 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-02-28 10:24:10 首次发布

5 篇文章

订阅专栏

本文介绍了在React应用中使用ReactRouter时，如何通过动态路由、search查询参数和state属性来传递参数。动态路由适合单个数据，search适合键值对且不显示在地址栏，state则用于复杂数据且不会显示，但需注意动态路由参数占位符的影响。

描述

路由配置

<Route path='MyDocument/:id' element={ <MyDocument/> }></Route>

传参

 this.props.navigate(path + '/123')

取参

 let params = useParams() // { id: '123' }

描述

传参

 this.props.navigate(path + '?name=freeman&time=' + new Date().getTime())

取参

 const searchParams = Object.fromEntries(this.props.searchParams)
 console.log(searchParams) // { name: 'freeman', time: '1706621562950' }

描述

传参

 this.props.navigate(path,{
   state:{
     name: 'freeman',
     time: new Date().getTime()
   }
 })

取参

 let location = useLocation()
 console.log(location.state) // {name: 'freeman', time: 1706622018604}