React Router Dom中如何仅在页面属于站内时返回上一页

问题本质 #

navigate(-1)直接操作浏览器全局历史栈，不会区分历史条目归属，当用户从站外直接进入当前页面时，回退会跳转到外部站点。

实现代码（React Router v6 环境） #

第一步：全局标记站内历史条目 #

在路由根组件中，给所有站内路由对应的历史条目追加专属标记，不影响原有路由状态：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.history.replaceState(
      {
        ...window.history.state,
        isInternalSiteEntry: true
      },
      ''
    );
  }, [pathname]);

  // 原有路由渲染逻辑
}

第二步：封装返回按钮 #

点击时先判断上一条历史记录是否属于本站，不属于则跳转至站点默认页：

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

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

  const handleClick = () => {
    // 校验上一条历史的站内标记
    if (window.history.state?.usr?.isInternalSiteEntry) {
      navigate(-1);
    } else {
      // 非站内来源，跳转至默认首页
      navigate('/', { replace: true });
    }
  };

  return <button onClick={handleClick}>返回</button>;
}

export default BackButton;

方案优势 #

• 不依赖document.referrer，不受浏览器Referrer拦截策略影响，判断准确率高
• 标记追加在路由原有历史状态上，不会破坏路由传参、页面状态等原有能力
• 兼容用户直接输入网址、从书签打开、外部链接跳转等所有站外进入场景

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