useNavigate、useParams、useLocation 用法

useNavigate、useParams、useLocation是 React Router v6 中最常用的三个 Hooks它们只能在函数组件中使用。一、useNavigate页面跳转作用用来进行页面跳转相当于以前 React Router v5 的history.push()和history.replace()。1、导入import { useNavigate } from react-router-dom;2、基本使用import { useNavigate } from react-router-dom; function Home() { const navigate useNavigate(); const goUser () { navigate(/user); }; return ( button onClick{goUser} 去用户页 /button ); }点击以后当前页面 ↓ /user3、传递参数query例如/user?id100nameTomnavigate(/user?id100nameTom);或者navigate({ pathname: /user, search: ?id100nameTom });4、传递 state推荐页面间数据传递navigate(/user, { state: { id: 100, name: Tom } });目标页面const location useLocation(); console.log(location.state);输出{ id:100, name:Tom }5、replace 跳转不会留下历史记录。navigate(/login, { replace: true });相当于history.replace()适用于登录成功login ↓ home按返回键不会回到 login。6、前进后退后退navigate(-1);前进navigate(1);回退两页navigate(-2);例如A ↓ B ↓ C navigate(-1) 返回 BuseNavigate 总结navigate(/home) navigate(/home?id1) navigate(/home,{ state:{} }) navigate(/home,{ replace:true }) navigate(-1)二、useParams获取动态路由参数作用获取 URL 中的动态参数。1、配置路由Route path/user/:id element{User /} /这里:id就是动态参数。例如/user/100100 就是 id。2、获取参数import { useParams } from react-router-dom; function User() { const params useParams(); console.log(params); return div用户页面/div; }输出{ id:100 }3、多个参数路由Route path/user/:id/:name element{User /} /地址/user/100/Tom获取const params useParams(); console.log(params);输出{ id:100, name:Tom }4、TS 写法const { id } useParams{ id: string; }();或者React Router v6 更推荐const { id } useParams{ id: string }();useParams 总结路由/user/:id/:name地址/user/100/Tom获取const { id, name } useParams();三、useLocation获取当前路由信息作用获取当前 URL、query、hash、state 等信息。1、导入import { useLocation } from react-router-dom;2、获取 locationconst location useLocation(); console.log(location);例如http://localhost:3000/user?id100#abc输出{ pathname:/user, search:?id100, hash:#abc, state:null, key:xxx }3、pathname获取路径const location useLocation(); console.log(location.pathname);输出/user4、searchQuery 参数例如/user?id100nameTom获取const location useLocation(); console.log(location.search);输出?id100nameTom这是字符串。需要解析。5、解析 Query 参数推荐使用浏览器内置的URLSearchParamsconst location useLocation(); const searchParams new URLSearchParams(location.search); console.log(searchParams.get(id)); console.log(searchParams.get(name));输出100 Tom也可以直接使用 React Router 提供的useSearchParams更推荐import { useSearchParams } from react-router-dom; const [searchParams] useSearchParams(); console.log(searchParams.get(id)); console.log(searchParams.get(name));6、获取 state上一页navigate(/user,{ state:{ id:100, name:Tom } })目标页const location useLocation(); console.log(location.state);输出{ id:100, name:Tom }7、hash/user#abc获取console.log(location.hash);输出#abcuseLocation 总结const location useLocation(); location.pathname location.search location.hash location.state三者之间的关系Hook作用示例useNavigate编程式导航navigate(/home)useParams获取路径参数Path Params/user/:id→iduseLocation获取当前路由信息pathname、search、hash、state完整示例路由配置import { BrowserRouter, Routes, Route } from react-router-dom; BrowserRouter Routes Route path/ element{Home /} / Route path/user/:id element{User /} / /Routes /BrowserRouter;Home.tsximport { useNavigate } from react-router-dom; export default function Home() { const navigate useNavigate(); const goUser () { navigate(/user/100?roleadmin, { state: { name: Tom, }, }); }; return button onClick{goUser}进入用户页/button; }User.tsximport { useLocation, useParams, useSearchParams, } from react-router-dom; export default function User() { // 路径参数 const { id } useParams{ id: string }(); // Query 参数 const [searchParams] useSearchParams(); const role searchParams.get(role); // 路由信息 const location useLocation(); return ( div h2用户页面/h2 pid{id}/p prole{role}/p pstate{JSON.stringify(location.state)}/p ppathname{location.pathname}/p /div ); }访问流程Home │ │ navigate(/user/100?roleadmin, { │ state: { name: Tom } │ }) ▼ URL: /user/100?roleadmin useParams() → { id: 100 } useSearchParams() → role admin useLocation() → { pathname: /user/100, search: ?roleadmin, state: { name: Tom } }如何选择需要跳转页面使用useNavigate需要获取/user/:id这类路径参数使用useParams需要获取当前路径、state、hash等完整路由信息使用useLocation需要读取或修改查询参数?keyvalue优先使用useSearchParams比手动解析location.search更方便。