React Router Dom useNavigate如何检测导航栈无法返回的状态？

要判断React Router导航栈是否存在可返回页面，不能靠路径名判断，得跟踪应用内部的路由历史。这里给你两种可行的方法：

方法一：自定义Hook维护路由历史 #

自己维护一个路由历史数组，通过useLocation监听路由变化，精准判断是否可以返回：

1. 先编写自定义Hook：

import { useLocation, useEffect, useState } from 'react';

export function useNavigationHistory() {
  const location = useLocation();
  const [historyStack, setHistoryStack] = useState([location]);

  useEffect(() => {
    // 仅当当前路由和历史栈最后一项不同时，才添加到栈中
    if (historyStack[historyStack.length - 1].pathname !== location.pathname) {
      setHistoryStack(prev => [...prev, location]);
    }
  }, [location, historyStack]);

  // 历史栈长度大于1时，说明存在可返回的页面
  const canGoBack = historyStack.length > 1;

  return { canGoBack, historyStack };
}

2. 在返回按钮组件中使用：

import { useNavigate } from 'react-router-dom';
import { Button } from 'reactstrap';
import { useNavigationHistory } from './useNavigationHistory';

function BackButton() {
  const navigate = useNavigate();
  const { canGoBack } = useNavigationHistory();

  const handleBack = () => {
    if (canGoBack) {
      navigate(-1);
    }
  };

  return (
    <Button 
      onClick={handleBack}
      disabled={!canGoBack}
      color="secondary"
    >
      返回
    </Button>
  );
}

export default BackButton;

这个方法能准确跟踪应用内的路由跳转，比如用户在首页和其他页面来回跳转时，只要历史栈里有多个条目，返回按钮就会保持可用，完全符合你的需求。

方法二：利用浏览器History API（简单但有局限性） #

如果不介意返回按钮可能跳转到应用外部页面，可以直接用window.history.length判断：

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

function BackButton() {
  const navigate = useNavigate();
  const [canGoBack, setCanGoBack] = useState(false);

  useEffect(() => {
    // 初始加载时，浏览器history长度可能为1（新标签页打开），跳转后会增加
    setCanGoBack(window.history.length > 1);
    
    // 监听浏览器前进/后退事件，实时更新状态
    const handlePopState = () => {
      setCanGoBack(window.history.length > 1);
    };
    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  const handleBack = () => {
    if (canGoBack) {
      navigate(-1);
    }
  };

  return (
    <Button 
      onClick={handleBack}
      disabled={!canGoBack}
      color="secondary"
    >
      返回
    </Button>
  );
}

export default BackButton;

注意：这个方法的局限性是，如果用户从外部页面进入你的应用，window.history.length会包含外部的历史记录，此时返回按钮会允许跳回外部页面。如果你只希望限制在应用内路由跳转，优先选择方法一。

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