React Router v6：如何使用<Link>组件替代useNavigate()实现返回上一页

我明白你想要用<Link>代替按钮式返回逻辑的需求——毕竟<a>标签在可访问性上更友好，支持右键新标签打开目标页面，还不会像按钮那样在首次打开页面时直接失效。下面给你两种适配React Router v6的解决方案，你可以根据场景选择：

方案1：基于跳转时传递的来源路径（最可靠，完美支持所有标签特性） #

这种方式需要在跳转到当前页面时，主动带上上一页的路径信息，这样<Link>就能直接指向正确的返回路径：

1. 在发起跳转的页面（比如页面A）中，跳转时通过state传递来源路径：

// 用<Link>跳转的写法
import { Link } from 'react-router-dom';

<Link to="/target-page" state={{ from: window.location.pathname }}>
  跳转到目标页面
</Link>

// 用useNavigate跳转的写法
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();

const handleJump = () => {
  navigate('/target-page', { state: { from: window.location.pathname } });
};

2. 在目标页面中，读取state里的来源路径，作为<Link>的to属性值：

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

const TargetPage = () => {
  const location = useLocation();
  // 优先取传递的来源路径，没有的话设置默认跳转路径（比如首页）
  const previousPage = location.state?.from || '/';

  return (
    <Link to={previousPage}>Go back</Link>
  );
};

这个方案的优势很明显：

• 完全遵循<Link>的原生行为，右键新标签打开会直接跳转到上一页
• 即使是直接打开目标页面（历史栈中只有当前页），也能跳转到预设的默认路径，不会出现功能失效的情况

方案2：模拟浏览器后退行为（无需传递路径，适合快速实现） #

如果你不想在跳转时额外传递路径，只想完全模拟navigate(-1)的浏览器后退逻辑，可以自定义一个BackLink组件：

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

const BackLink = ({ children, fallbackPath = '/' }) => {
  const handleClick = (e) => {
    // 检查历史栈长度，如果只有当前页（首次打开），就跳转到默认路径
    if (window.history.length <= 1) {
      e.preventDefault();
      window.location.href = fallbackPath;
      return;
    }
    // 否则执行浏览器后退
    e.preventDefault();
    window.history.back();
  };

  return (
    <Link to="#" onClick={handleClick}>
      {children}
    </Link>
  );
};

// 使用示例
<BackLink fallbackPath="/">Go back</BackLink>

不过这个方案有个小局限：右键新标签打开时，会跳转到当前页面的锚点（#），而不是上一页。如果需要完整支持<a>标签的所有特性，还是推荐方案1。

额外提醒：别用to=".."！ #

你可能会想到用相对路径to=".."，但它是基于路由层级的跳转，比如当前路由是/users/123，to=".."会跳转到/users；但如果用户是从/dashboard跳转到/users/123的，那to=".."就不符合“返回上一页”的预期了——它和navigate(-1)基于浏览器历史栈的后退逻辑完全不同，所以不建议用这种方式实现返回功能。

内容的提问来源于stack exchange，提问作者sandrina-p