当前位置：首页 > React

react如何判断回退路由

2026-01-25 07:51:10React

判断回退路由的方法

在React中，可以通过react-router提供的API或自定义逻辑来判断用户是否执行了回退操作（例如点击浏览器的后退按钮）。以下是几种实现方式：

使用`useNavigate`监听导航动作

react-router-dom的useNavigate可以获取导航对象，结合POP动作类型（浏览器后退/前进触发的导航）进行判断：

react如何判断回退路由

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

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

  useEffect(() => {
    return navigate.listen((location, action) => {
      if (action === 'POP') {
        console.log('回退或前进操作触发');
        // 执行回退逻辑
      }
    });
  }, [navigate]);
}

比较路由历史记录

通过比较当前路由与历史记录中的前一个路由，判断是否为回退：

react如何判断回退路由

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

function MyComponent() {
  const location = useLocation();
  const prevPathRef = useRef(location.pathname);

  useEffect(() => {
    if (location.pathname !== prevPathRef.current) {
      // 路由发生变化，可能是回退或跳转
      prevPathRef.current = location.pathname;
    }
  }, [location]);
}

使用自定义历史记录栈

手动维护一个路由栈，通过比对栈顶元素判断回退：

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

function useBackNavigation() {
  const location = useLocation();
  const historyStack = useRef([]);

  useEffect(() => {
    historyStack.current.push(location.pathname);
    if (historyStack.current.length > 2 && 
        historyStack.current[historyStack.current.length - 2] === location.pathname) {
      console.log('回退操作');
    }
  }, [location]);
}

监听浏览器`popstate`事件

直接监听浏览器的原生事件，适用于非react-router场景：

useEffect(() => {
  const handlePopstate = () => {
    console.log('回退或前进操作');
  };
  window.addEventListener('popstate', handlePopstate);
  return () => window.removeEventListener('popstate', handlePopstate);
}, []);