当前位置：首页 > React

react如何知道路由返回

2026-01-25 14:23:58React

React Router 路由返回检测方法

React Router 本身不直接提供“返回”事件的监听机制，但可通过以下方式间接实现路由返回检测：

使用 `useLocation` 和 `useEffect` 监听路径变化

通过比较当前路径与前次路径，判断是否发生返回操作：

react如何知道路由返回

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

function App() {
  const location = useLocation();
  const navigate = useNavigate();
  const [pathHistory, setPathHistory] = useState([]);

  useEffect(() => {
    setPathHistory(prev => [...prev, location.pathname]);

    if (pathHistory.length > 1 && 
        pathHistory[pathHistory.length - 2] === location.pathname) {
      console.log('检测到返回操作');
    }
  }, [location]);

  return <div>{/* 页面内容 */}</div>;
}

利用 `navigate` 的 state 传递标记

在跳转时添加状态标记，返回时通过检查状态判断：

react如何知道路由返回

// 跳转时设置状态
navigate('/target', { state: { fromForward: true } });

// 目标组件内检测
const location = useLocation();
useEffect(() => {
  if (!location.state?.fromForward) {
    console.log('可能是返回操作');
  }
}, [location]);

使用自定义历史记录栈

手动维护路由栈实现精确判断：

const [historyStack, setHistoryStack] = useState([window.location.pathname]);

useEffect(() => {
  const currentPath = window.location.pathname;
  setHistoryStack(prev => {
    const newStack = [...prev];
    if (newStack[newStack.length - 1] !== currentPath) {
      newStack.push(currentPath);
    }
    return newStack;
  });

  if (historyStack.length > 1 && 
      historyStack[historyStack.length - 2] === currentPath) {
    console.log('路由返回发生');
  }
}, [window.location.pathname]);

浏览器原生 popstate 事件

监听浏览器原生返回按钮事件：

useEffect(() => {
  const handlePopstate = () => {
    console.log('浏览器返回/前进按钮触发');
  };
  window.addEventListener('popstate', handlePopstate);
  return () => window.removeEventListener('popstate', handlePopstate);
}, []);