位置: IT常识 - 正文

【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API(react router教程)

编辑：rootadmin

【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API

推荐整理分享【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API(react router教程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:react router prompt,react router prompt,react-router6,react-router5,react-router6,react router5,react-router5,react router v6,内容如对您有帮助，希望把文章链接给更多的朋友！

前言

博主主页👉🏻蜡笔雏田学代码专栏链接👉🏻React专栏之前学习了react-router-dom5版本的相关内容参考文章👉🏻React路由组件传参的三种方式和【React路由】编程式路由导航回顾上篇文章👉🏻【React Router 6 快速上手一】，今天来学习react-router-dom6版本的另一些相关知识！感兴趣的小伙伴一起来看看吧~🤞

【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API(react router教程)

文章目录1. 向路由组件传递params参数：useParams()2. 向路由组件传递search参数：useSearchParams()3. 向路由组件传递state参数：useLocation()4. 编程式路由导航useNavigate()5. useInRouterContext()6. useNavigationType()7. useOutlet()8. useResolvedPath()1. 向路由组件传递params参数：useParams()

在v5版本中，路由组件传递参数方式有三种：params、search、state。在v6中，都能用这三种方式，但是写法不一样了。

当点击消息1这个导航链接时，展示下方对应的Detail路由组件，并向这个组件传递params参数（ID，TITLE，CONTENT）信息。

向路由组件传递params参数：和v5一样，在路径后面跟上想要传递的值

Message.jsx

message.map((m) => { return ( // 路由链接 <li key={m.id}> <Link to={`detail/${m.id}/${m.title}/${m.content}`}> {m.title} </Link>   </li> )})

在路由表中，

本文链接地址:https://www.jiuchutong.com/zhishi/294570.html 转载请保留说明！

上一篇：YOLOv8代码上线，官方宣布将发布论文，附精度速度初探和对比总结(yolov1代码)

下一篇：阿尔萨斯的葡萄酒村，法国上莱茵省 (© Walter Bibikow/eStock Photo)(阿尔萨斯葡萄园)