react-router-dom 的 useNavigate 方法列表

在 react-router-dom 中，useNavigate 是一个用于编程式导航的 Hook，它返回一个 navigate 函数，你可以用它来在组件内部进行页面跳转。

---

📌 useNavigate 的方法

useNavigate 返回的 navigate 函数可以接受不同类型的参数，主要有以下几种用法：

1️⃣ 直接跳转到指定路径

tsx

复制编辑

const navigate = useNavigate(); // 跳转到 /home navigate("/home"); // 跳转时带上状态数据（可在 useLocation().state 读取） navigate("/home", { state: { userId: 123 } });

---

2️⃣ 前进 / 后退

tsx

复制编辑

// 后退一步（等同于 window.history.back()） navigate(-1); // 前进两步 navigate(2);

---

3️⃣ 替换当前历史记录

tsx

复制编辑

navigate("/dashboard", { replace: true });

✅ replace: true 表示用新页面替换当前页面，不会留下回退历史。

---

4️⃣ 传递状态（state）

tsx

复制编辑

navigate("/profile", { state: { name: "Alice", age: 25 } });

然后在目标组件里用 useLocation 读取：

tsx

复制编辑

import { useLocation } from "react-router-dom"; const Profile = () => { const location = useLocation(); console.log(location.state); // { name: "Alice", age: 25 } };

---

5️⃣ 通过函数方式跳转

可以动态生成路径：

tsx

复制编辑

navigate((location) => ({ ...location, pathname: "/settings", search: "?theme=dark" }));

---

🚀 总结

方法	示例	作用
跳转到指定路径	navigate("/home")	直接跳转
带 state 参数跳转	navigate("/home", { state: { id: 1 } })	传递数据
前进/后退	navigate(-1) / navigate(2)	浏览历史
替换当前页面（不留历史记录）	navigate("/new", { replace: true })	替换页面
动态生成路径	navigate((location) => ({...location, pathname: "/about"}))	计算路径

这些用法都可以根据你的具体需求灵活使用 😃