React Router v6返回按钮优化：无路由历史时隐藏按钮

方案1：React Router v6.4+ 推荐用法 #

React Router v6.4及以上版本的useNavigate钩子返回的导航函数提供了canGo方法，可直接判断是否存在应用内可回退的路由记录：

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

const GoBackBtn = () => {
  const navigate = useNavigate();
  // 检查是否能回退到应用内的上一页
  const canGoBack = navigate.canGo(-1);

  // 无可用回退记录时隐藏按钮
  if (!canGoBack) return null;

  return (
    <button onClick={() => navigate(-1)}>
      {'<='}
    </button>
  );
};

方案2：兼容React Router v6.4以下版本 #

如果项目仍使用v6.4之前的版本，可以通过跟踪路由的key维护自定义历史栈，以此判断是否有可回退的应用内页面：

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

const GoBackBtn = () => {
  const navigate = useNavigate();
  const location = useLocation();
  // 初始化历史栈，包含当前路由的key
  const [historyKeys, setHistoryKeys] = useState([location.key]);

  useEffect(() => {
    // 路由前进时，将新路由key加入栈
    if (!historyKeys.includes(location.key)) {
      setHistoryKeys(prev => [...prev, location.key]);
    }
    // 路由回退时，移除栈顶的key
    return () => setHistoryKeys(prev => prev.slice(0, -1));
  }, [location.key]);

  // 栈长度大于1时，说明存在可回退的应用内页面
  const canGoBack = historyKeys.length > 1;

  if (!canGoBack) return null;

  return (
    <button onClick={() => navigate(-1)}>
      {'<='}
    </button>
  );
};

原理说明 #

• 首次访问根路径时，应用的路由历史栈中只有当前页面的记录，此时navigate.canGo(-1)返回false（v6.4+），或自定义栈长度为1，按钮会被隐藏，避免点击后跳转到浏览器外部历史页面。
• 当用户在应用内跳转路由后，历史栈长度增加，按钮自动显示，支持正常回退操作。

内容的提问来源于stack exchange，提问作者Islam Y-