带栈导航的Web应用中this.props.history.length异常导致返回按钮问题求助

嘿，这个问题我太熟了！我之前做React项目的时候也踩过这个坑——浏览器的历史栈是和标签页绑定的，不是你的应用单独管控的。所以当你关闭页面再重新在同一个标签页输入网址打开时，浏览器会把之前该标签页的历史记录都保留着，这就导致this.props.history.length根本反映不了你当前应用的实际导航状态。

下面给你几个靠谱的解决方案：

1. 维护应用专属的导航栈状态 #

最稳妥的方式是自己在应用里跟踪导航次数，完全不依赖浏览器的history.length。你可以在根组件里维护一个状态变量，每次路由发生PUSH/POP/REPLACE操作时，手动更新这个计数。

类组件示例： #

class App extends React.Component {
  state = {
    internalHistoryCount: 1 // 初始值对应应用首页
  };

  componentDidMount() {
    // 监听路由变化，同步更新内部计数
    this.unlisten = this.props.history.listen(() => {
      const { action } = this.props.history;
      if (action === 'PUSH') {
        this.setState(prev => ({ internalHistoryCount: prev.internalHistoryCount + 1 }));
      } else if (action === 'POP') {
        this.setState(prev => ({ internalHistoryCount: prev.internalHistoryCount - 1 }));
      }
      // REPLACE操作不改变计数，因为只是替换了当前历史记录
    });
  }

  componentWillUnmount() {
    // 组件卸载时取消监听，避免内存泄漏
    this.unlisten();
  }

  handleGoBack = () => {
    // 只有当内部计数大于1时，才允许返回
    if (this.state.internalHistoryCount > 1) {
      this.props.history.goBack();
    }
  };

  render() {
    return (
      <div>
        {/* 只有能返回时才显示按钮 */}
        {this.state.internalHistoryCount > 1 && (
          <button onClick={this.handleGoBack}>返回</button>
        )}
        {/* 你的路由组件 */}
        <Route path="/" component={Home} />
        <Route path="/page1" component={Page1} />
      </div>
    );
  }
}

函数组件示例： #

如果你的项目用的是函数组件+Hook，可以用useLocation和useHistory来实现：

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

function BackButton() {
  const location = useLocation();
  const history = useHistory();
  const [routeStack, setRouteStack] = useState([location.pathname]);

  useEffect(() => {
    const updateStack = () => {
      switch (history.action) {
        case 'PUSH':
          setRouteStack(prev => [...prev, location.pathname]);
          break;
        case 'POP':
          setRouteStack(prev => prev.slice(0, -1));
          break;
        case 'REPLACE':
          setRouteStack(prev => [...prev.slice(0, -1), location.pathname]);
          break;
        default:
          break;
      }
    };
    updateStack();
  }, [location.pathname, history.action]);

  const handleGoBack = () => {
    if (routeStack.length > 1) {
      history.goBack();
    }
  };

  return routeStack.length > 1 ? (
    <button onClick={handleGoBack}>返回</button>
  ) : null;
}

2. 初始加载时重置历史记录（局限性方案） #

如果你只是想处理“重新打开标签页输入网址”的场景，可以在应用初始化时，用history.replace替换当前的历史记录，把浏览器的历史栈长度重置为1。不过这个方法有局限性，比如用户从其他页面跳转过来时，会破坏正常的返回逻辑，所以谨慎使用。

// 类组件示例
componentDidMount() {
  // 判断是否是重新加载页面
  const navEntry = performance.getEntriesByType('navigation')[0];
  if (navEntry?.type === 'reload') {
    // 替换当前历史记录，让history.length回到1
    this.props.history.replace(this.props.history.location.pathname);
  }
}

总结 #

浏览器的历史栈是全局的，和标签页绑定，完全依赖它来判断应用内的返回状态肯定会出问题。最可靠的方式还是维护应用自己的导航栈，这样不管浏览器的历史记录是什么状态，你都能准确控制返回按钮的显示和行为。

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