React中如何检测用户点击浏览器返回按钮前的页面来源路径？

在React项目里，用户从A/B/C页面点击返回回到A/B时，要拿到之前的A/B/C路径，有几种实用的方法：

方法一：自定义维护访问历史栈 #

自己维护一个数组记录用户的访问路径，每次路由变化时更新这个栈，就能在返回时快速获取上一页路径。

示例代码（基于React Router v6）：

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

function App() {
  const location = useLocation();
  const [historyStack, setHistoryStack] = useState([location.pathname]);

  useEffect(() => {
    // 路由跳转时，若为新页面则添加到栈中
    if (historyStack[historyStack.length - 1] !== location.pathname) {
      setHistoryStack(prev => [...prev, location.pathname]);
    }

    // 监听浏览器前进/后退事件
    const handlePopState = () => {
      // 栈的倒数第二项就是返回前的页面路径
      const prevPath = historyStack[historyStack.length - 2];
      if (prevPath) {
        console.log('返回前的页面路径：', prevPath);
        // 这里可添加业务逻辑，比如存储路径到状态
      }
      // 更新栈，移除当前返回的路径项
      setHistoryStack(prev => prev.slice(0, -1));
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, [location, historyStack]);

  return <div>你的应用内容</div>;
}

export default App;

方法二：结合React Router的导航类型判断 #

React Router v6+提供的useNavigationType钩子，能判断当前导航类型（POP对应浏览器前进/后退触发的导航），配合useLocation就能获取来源路径。

示例代码：

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

function App() {
  const location = useLocation();
  const navigationType = useNavigationType();
  const [previousPath, setPreviousPath] = useState('');

  useEffect(() => {
    const currentPath = location.pathname;
    // 当导航类型为POP时，previousPath就是返回前的路径
    if (navigationType === 'POP') {
      console.log('返回前的页面路径：', previousPath);
    }
    // 更新previousPath为当前路径，供下一次判断使用
    setPreviousPath(currentPath);
  }, [location, navigationType]);

  return <div>你的应用内容</div>;
}

export default App;

方法三：监听popstate事件并读取history.state #

浏览器的history.state可能存储了路径信息（取决于路由库实现），直接监听popstate事件即可获取：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handlePopState = (event) => {
      // event.state的结构由路由库决定，React Router会存储pathname
      if (event.state?.pathname) {
        console.log('返回前的页面路径：', event.state.pathname);
      }
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  return <div>你的应用内容</div>;
}

export default App;

注意：这种方法依赖路由库对history.state的处理，兼容性不如自定义栈稳定，建议结合使用。

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