v6路由跳转失败问题排查：useNavigate使用技巧

Mike459 +0/-0 0 0 正常 2025-12-24T07:01:19 React-Router

在React Router v6升级过程中，useNavigate Hook的使用是路由跳转的核心方式。然而，在实际开发中经常遇到跳转失败的问题。

常见问题复现

// 错误示例
const navigate = useNavigate();

const handleClick = () => {
  // 这种写法可能导致跳转失败
  navigate('/user');
  // 或者
  navigate({ pathname: '/user' });
};

核心原因分析

组件未在Router上下文中：确保组件被BrowserRouter包裹
异步操作中的调用：在Promise或setTimeout中使用navigate需要特殊处理
参数格式错误：v6中navigate参数格式有所变化

正确使用方式

const navigate = useNavigate();

// 基本跳转
const handleNavigate = () => {
  navigate('/user'); // 直接传路径字符串
};

// 带状态跳转
const handleNavigateWithState = () => {
  navigate('/user', { 
    state: { from: 'home' } 
  });
};

// 返回上一页
const handleGoBack = () => {
  navigate(-1); // 或者 navigate(-1, { replace: true })
};

// 路由参数传递
const handleParamNavigate = (id) => {
  navigate(`/user/${id}`);
};

实际场景解决方案

当在异步操作中使用时：

const handleClick = async () => {
  try {
    await fetchData();
    // 确保在异步完成后执行导航
    navigate('/success');
  } catch (error) {
    navigate('/error');
  }
};