React Router v4调用goBack()导致New组件重复渲染问题咨询

嘿，我来帮你拆解一下这个问题，你遇到的情况其实是React Router历史栈操作和组件生命周期时序冲突导致的，咱们一步步来看：

为什么会出现这个问题？ #

首先理清楚整个流程的时序：

1. 你点击Go To Form，路由跳转到/items/new，New组件开始挂载。
2. New组件的componentDidMount钩子触发，调用history.goBack()，浏览器历史回退一步，回到/items页面，这时候Items组件重新渲染，New组件本应该被卸载。
3. 但问题来了——如果你的项目是在开发环境的React严格模式下运行，React会为了检测组件的副作用，刻意重复调用一次componentDidMount（仅开发环境）。这就导致goBack()被执行了两次：第一次回到/items，第二次直接回退到/items之前的路由，同时因为路由的异常变化，New组件被意外重新挂载了。

另外，history.goBack()是异步操作，在组件挂载的关键阶段直接调用，很容易和React的渲染周期产生冲突，这也是导致组件重复挂载的原因之一。而push()能正常工作，是因为它只是向历史栈添加新记录，不会修改已有记录，避开了这种时序问题。

怎么解决？ #

这里有几个靠谱的解决方案，你可以根据自己的业务场景选择：

1. 用history.replace()代替goBack() #

replace()的作用是替换当前的历史记录，而不是回退。这样当你跳转到/items/new后，直接用/items覆盖这条记录，历史栈里就不会留下/items/new，自然不会出现多次回退的问题：

class New extends React.Component {
  componentDidMount() {
    // 直接替换当前路由为/items，覆盖掉/items/new的历史记录
    this.props.history.replace('/items');
  }

  render() {
    // 重定向期间可以返回null或者加载状态
    return null;
  }
}

2. 用Redirect组件实现声明式重定向 #

这种方式更符合React的声明式编程风格，通过状态控制重定向逻辑：

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

class New extends React.Component {
  state = {
    shouldRedirect: false
  };

  componentDidMount() {
    this.setState({ shouldRedirect: true });
  }

  render() {
    if (this.state.shouldRedirect) {
      // 可以根据历史记录回退到之前的路径，默认回到/items
      const prevRoute = this.props.history.state?.from || '/items';
      return <Redirect to={prevRoute} />;
    }
    // 这里保留你原本的组件渲染内容（如果需要的话）
    return null;
  }
}

3. 直接跳过New组件的挂载（如果业务允许） #

如果你的需求只是点击按钮后立即返回，那完全可以在Items组件里直接处理点击逻辑，不用跳转到New组件：

// 修改Items里的Link
<div>
  <span onClick={() => {
    // 这里可以直接执行你需要的逻辑，不用跳转
    // 如果需要回退的话，直接在这里调用goBack()
    this.props.history.goBack();
  }} style={{ cursor: 'pointer', color: 'blue' }}>
    Go To Form
  </span>
</div>

额外提示 #

如果是开发环境的严格模式导致的重复生命周期调用，你可以暂时移除React.StrictMode的包裹来验证，但生产环境建议保留，它能帮你提前发现组件的潜在副作用问题。

内容的提问来源于stack exchange，提问作者E. Shcherbo