React Router v6中如何实现返回至跳转来源页面？

下面是两种适配React Router v6的简洁实现方案，覆盖不同场景需求：

方案一：直接返回浏览器历史栈上一页（最简实现） #

利用useNavigate钩子的go(-1)方法，直接回退到历史栈中的上一页，适合大多数普通跳转场景。

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

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

  return (
    <button onClick={() => navigate(-1)}>
      返回来源页面
    </button>
  );
}

特点：

• 代码极简，无需额外配置
• 依赖浏览器历史栈，如果用户直接通过URL访问当前页面，回退可能跳转到非应用内页面或首页

方案二：精准跳转至指定来源页面（更可靠） #

如果需要严格返回跳转时的来源页面，可以在跳转时通过state传递来源路径，在目标页面读取后跳转回去。

1. 来源页面（跳转时传递来源信息） #

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

function SourcePage() {
  const navigate = useNavigate();
  const location = useLocation();

  const goToCurrentPage = () => {
    // 将当前页面路径存入state，传递给目标页面
    navigate('/current-page', { state: { from: location.pathname } });
  };

  return <button onClick={goToCurrentPage}>跳转到当前页面</button>;
}

2. 当前页面（读取state并返回） #

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

function CurrentPage() {
  const navigate = useNavigate();
  const location = useLocation();

  const goBackToSource = () => {
    // 优先使用state中的来源路径，否则降级回退上一页
    const sourcePath = location.state?.from;
    sourcePath ? navigate(sourcePath) : navigate(-1);
  };

  return <button onClick={goBackToSource}>返回来源页面</button>;
}

特点：

• 精准控制返回的页面，不受浏览器其他历史记录影响
• state存储在内存中，页面刷新后会丢失，此时会自动降级回退上一页

进阶：支持页面刷新后仍能返回 #

如果需要解决页面刷新后state丢失的问题，可以结合localStorage持久化来源路径：

来源页面跳转时 #

const goToCurrentPage = () => {
  localStorage.setItem('appSourcePath', location.pathname);
  navigate('/current-page');
};

当前页面返回时 #

const goBackToSource = () => {
  const sourcePath = localStorage.getItem('appSourcePath') || location.state?.from;
  if (sourcePath) {
    navigate(sourcePath);
    localStorage.removeItem('appSourcePath'); // 用完清除缓存
  } else {
    navigate(-1);
  }
};

内容的提问来源于stack exchange，提问作者Islam Y-