位置: IT常识 - 正文
【React Router 6 快速上手二】useParams / useSearchParams / useLocation / 编程式路由导航useNavigate等API(react router教程)
编辑：rootadmin推荐整理分享【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版本的另一些相关知识！ 感兴趣的小伙伴一起来看看吧~🤞
文章目录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> )})在路由表中，
上一篇：YOLOv8代码上线，官方宣布将发布论文，附精度速度初探和对比总结(yolov1代码)
下一篇：阿尔萨斯的葡萄酒村，法国上莱茵省 (© Walter Bibikow/eStock Photo)(阿尔萨斯葡萄园)
