React-router-dom(v6)：如何实现仅在应用内返回，外部来源跳转至根路径？

没有，react-router-dom v6 并没有提供这种内置功能——即返回上一页时自动判断是否属于当前应用上下文，不属于则跳转根路径。默认的navigate(-1)只会严格遵循浏览器的历史栈跳转，不管目标页面是否在你的应用范围内。

自定义实现方案 #

既然官方没有内置，你可以自己通过浏览器提供的API结合react-router的能力来实现这个逻辑。核心思路是利用document.referrer判断上一页的来源是否属于当前应用域名，再决定跳转方向：

1. 自定义Hook实现智能返回逻辑 #

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

export function useSmartBack() {
  const navigate = useNavigate();

  const smartBack = () => {
    const referrer = document.referrer;
    const currentAppOrigin = window.location.origin;

    // 检查来源是否属于当前应用
    const isFromApp = referrer.startsWith(currentAppOrigin);

    if (isFromApp) {
      // 来自应用内，正常返回上一页
      navigate(-1);
    } else {
      // 来自外部或无来源，跳转到应用根路径
      navigate('/');
    }
  };

  return smartBack;
}

2. 在组件中使用 #

import { useSmartBack } from './path/to/hooks';

function BackButton() {
  const smartBack = useSmartBack();

  return (
    <button onClick={smartBack} type="button">
      返回
    </button>
  );
}

边界情况说明 #

• 如果用户直接通过书签/URL输入进入你的页面（无referrer），会自动跳转到根路径
• 若用户在应用内多次跳转，navigate(-1)会正确回到应用内的上一页，不受document.referrer的影响（因为此时referrer可能是更早的页面，但navigate(-1)是基于历史栈的）
• 注意document.referrer在某些隐私模式下可能为空，这种情况也会触发跳转到根路径

内容的提问来源于stack exchange，提问作者Agrendallan