React中点击浏览器返回按钮后如何获取上一页路径（react-router-dom）

直接给你几个可行的方案，都是基于react-router-dom v6的主流用法：

方案1：跳转时存状态，回退时读取 #

这个是最稳妥的，完全依赖react-router的状态管理，没有跨域或环境限制：

1. 从PageA跳去PageB的时候，把目标路径存在导航状态里：

// PageA.tsx
import { useNavigate } from 'react-router-dom';

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

  const goToPageB = () => {
    // 把要跳去的/path-b存到state里
    navigate('/path-b', { state: { from: '/path-b' } });
  };

  return <button onClick={goToPageB}>去PageB</button>;
};

2. 在PageA里，用useNavigationType判断是不是浏览器回退操作（POP类型），再通过useLocation取出之前存的路径：

// PageA.tsx
import { useLocation, useNavigationType } from 'react-router-dom';

const PageA = () => {
  const location = useLocation();
  const navType = useNavigationType();

  // 只有当是浏览器回退/前进（POP）的时候才处理
  if (navType === 'POP') {
    const prevPath = location.state?.from;
    if (prevPath) {
      console.log('刚才从这个路径回来：', prevPath); // 这里就是/path-b
      // 这里写你要执行的逻辑
    }
  }

  return <div>Page A</div>;
};

方案2：监听浏览器原生popstate事件 #

如果不想手动存状态，也可以直接监听浏览器的回退事件，配合document.referrer拿到前一页路径：

// PageA.tsx
import { useEffect } from 'react';

const PageA = () => {
  useEffect(() => {
    const handleBack = (event: PopStateEvent) => {
      // document.referrer会返回上一页的完整URL，提取路径部分
      const prevUrl = document.referrer;
      if (prevUrl) {
        const prevPath = new URL(prevUrl).pathname;
        if (prevPath === '/path-b') {
          console.log('回退前的路径是：', prevPath);
        }
      }
    };

    window.addEventListener('popstate', handleBack);
    // 组件卸载时记得移除监听，避免内存泄漏
    return () => window.removeEventListener('popstate', handleBack);
  }, []);

  return <div>Page A</div>;
};

⚠️ 注意：document.referrer只在同域名跳转时有效，如果是跨域或者用户直接输入URL进来，这个值会是空的。

方案3：用数据路由的loader钩子（v6.4+） #

如果你用了react-router的createBrowserRouter数据路由，可以在PageA的loader里直接获取导航信息：

先配置路由：

// router.tsx
import { createBrowserRouter } from 'react-router-dom';
import PageA from './PageA';
import PageB from './PageB';

const router = createBrowserRouter([
  {
    path: '/path-a',
    element: <PageA />,
    loader: ({ navigationType, request }) => {
      let prevPath = '';
      // 判断是回退操作的话，从request状态里取之前存的路径
      if (navigationType === 'POP') {
        prevPath = request.state?.from || '';
      }
      return { prevPath };
    },
  },
  {
    path: '/path-b',
    element: <PageB />,
  },
]);

export default router;

然后在PageA里用useLoaderData拿到数据：

// PageA.tsx
import { useLoaderData } from 'react-router-dom';

const PageA = () => {
  const { prevPath } = useLoaderData() as { prevPath: string };
  
  if (prevPath) {
    console.log('回退前的路径：', prevPath);
  }

  return <div>Page A</div>;
};

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