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

【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版本的另一些相关知识！ 感兴趣的小伙伴一起来看看吧~🤞

文章目录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>&nbsp;&nbsp; </li> )})

在路由表中，