React Router v6 路由回退指南

在 React Router v6 版本中，路由导航方式发生了重大变化。相比之前的版本，新的 API 设计更加简洁和直观。

基础回退方法

在 React Router v6 中，使用 useNavigate hook 来进行编程式导航：

import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate(-1)}>返回上一页</button>
  );
}

导航参数说明

• navigate(-1) - 返回上一页
• navigate(-2) - 返回前两页
• navigate(1) - 前进一页
• navigate(2) - 前进两页

Link 组件的回退用法

除了编程式导航，你也可以在 Link 组件中使用回退功能：

import { Link } from 'react-router-dom';

const BackButton = () => {
  return (
    <Link to={-1}>
      返回
    </Link>
  );
};

TypeScript 类型问题

需要注意的是，Link 组件的 to 属性在 TypeScript 中类型定义不支持数字，但这在实际运行时是有效的。

处理无法回退的情况

在实际应用中，可能需要检查是否可以回退，以避免用户被困在某个页面：

方法一：使用 history.length 检查

import { useNavigate } from 'react-router-dom';

function App() {
  const navigate = useNavigate();
  
  const handleGoBack = () => {
    if (window.history?.length && window.history.length > 1) {
      navigate(-1);
    } else {
      navigate('/', { replace: true });
    }
  };
  
  return <button onClick={handleGoBack}>返回</button>;
}

方法二：使用 location.key 检查

import { useLocation, useNavigate } from 'react-router-dom';

function App() {
  const location = useLocation();
  const navigate = useNavigate();
  
  // 检查是否可以回退
  const canGoBack = location.key !== 'default';
  const target = canGoBack ? -1 : '/';
  
  return <button onClick={() => navigate(target)}>返回</button>;
}

location.key 说明

初始页面的 location.key 值为 'default'，通过检查这个值可以判断是否是首次加载的页面。

高级用法：状态管理回退目标

在某些场景下（如认证流程），可能需要明确指定回退目标而不是依赖浏览器历史记录：

import { useLocation, useNavigate } from 'react-router-dom';

function LoginPage() {
  const location = useLocation();
  const navigate = useNavigate();
  
  // 登录成功后处理重定向
  const handleLoginSuccess = () => {
    const from = location.state?.from || '/dashboard';
    navigate(from, { replace: true });
  };
  
  // ...
}

// 在需要跳转到登录页的地方
function ProtectedComponent() {
  const navigate = useNavigate();
  const location = useLocation();
  
  const goToLogin = () => {
    navigate('/login', { 
      state: { from: location.pathname } 
    });
  };
  
  // ...
}

回退或跳转到备选路径

如果你希望回退，但当无法回退时跳转到指定页面：

<button onClick={() => navigate(-1) || navigate('/dashboard')}>
  返回或前往首页
</button>

最佳实践建议

1. 优先使用 React Router 的 API 而不是直接操作 window.history
2. 始终处理无法回退的情况，提供合理的备选导航目标
3. 在认证流程中使用状态管理来明确指定重定向目标
4. 考虑用户体验，确保导航行为符合用户预期

通过合理运用这些技术，你可以在 React Router v6 中实现灵活且可靠的页面导航和回退功能。