useNavigate useNavigate 跳转
最后更新：2026-10-28
useNavigate useNavigate 跳转
useNavigate 返回跳转函数 navigate：登录后进首页、提交后回列表、拦截未登录用户——这些「代码触发的跳转」都用它。navigate(to) 前进，navigate(-1) 后退，还能携带 replace 与 state。
| 分组 | 路由与状态管理 |
|---|---|
| 类型 | Hook |
| 引入版本 | React Router 6.4 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
import { useNavigate } from 'react-router-dom'
function LoginButton() {
const navigate = useNavigate()
return (
<button onClick={() => {
// 登录成功后跳转，replace 不留下历史记录
navigate('/dashboard', { replace: true })
}}>登录</button>
)
}
// navigate(-1) 相当于浏览器后退
// navigate('/detail', { state: { from: 'home' } }) 携带隐藏状态⚙️ 参数
| to | 跳转目标：路径字符串（'/home'）、数字（-1 后退）或 { pathname, search } 对象。 |
|---|---|
| options | 第二个参数：{ replace: true } 替换历史记录，{ state } 携带不显示在地址栏的数据。 |
返回值：返回 navigate(to, options?) 函数：调用即触发跳转；它不渲染任何 UI，只改变路由。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
点「去登录」历史栈追加 login；「replace 回首页」覆盖栈顶不留痕；「后退」弹栈回上一页——对应 navigate 的 push/replace/back（模拟演示）。💡 要点
💡 提示 登录后跳首页建议 navigate('/home', { replace: true })：用户点后退不会回到登录页。
ℹ️ 说明 v6 移除了 useHistory，统一为 useNavigate；数字跳转 navigate(-2) 也由它负责。
⚠️ 注意 navigate 不要在渲染期直接调用，要放进事件回调或 Effect，否则会报「Cannot update during render」。
🏷️ 路由与状态管理相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q navigate 和 Link 什么时候用哪个？
A 用户「点击链接」用 Link；「代码决定跳转」（提交成功、权限拦截、倒计时结束）用 navigate。
Q replace: true 有什么用？
A 用新记录替换当前历史项，后退时跳过该页——登录页、支付中间页常用，防止回退导致重复操作。
Q 怎么在跳转时传数据？
A navigate('/detail', { state: { from: 'home' } })，目标页用 useLocation().state 读取；不显示在地址栏，刷新后仍在（存在 history.state）。
