React中如何获取上一页页面信息？

要实现「仅当来源页为同域网站时才返回上一页」的需求，无法直接通过React Router的useNavigate获取上一页信息，需要借助浏览器原生的document.referrer来判断来源域：

解决方案代码 #

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

const YourComponent = () => {
  const navigate = useNavigate();

  const goBackSafely = () => {
    const referrerUrl = document.referrer;
    if (!referrerUrl) return;

    const currentOrigin = window.location.origin;
    const referrerOrigin = new URL(referrerUrl).origin;

    // 验证来源页与当前页同域
    if (referrerOrigin === currentOrigin) {
      navigate(-1);
    }
  };

  return (
    <button onClick={goBackSafely}>安全返回</button>
  );
};

export default YourComponent;

关键说明 #

• document.referrer会返回用户跳转至当前页的来源URL，若用户直接访问当前页（无来源）则返回空字符串
• 通过URL.origin提取域名（包含协议、域名、端口），确保严格同域验证，避免跨站跳转
• 若来源页为其他网站，直接跳过返回操作

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture