React-Router路由跳转时componentWillUnmount未调用问题排查

这问题我之前踩过坑！componentWillUnmount没触发，大概率是你的Home组件根本没被真正卸载，或者你用错了卸载逻辑。咱们一个个排查：

1. Home组件没有作为路由页面被渲染 #

如果你的App组件结构里，Home是一直挂载在路由外面的，那不管你切到哪个路由，Home都不会卸载。比如这种错误写法：

function App() {
  return (
    <div className="app-container">
      <Home /> {/* 这里Home始终存在，不会随路由切换卸载 */}
      <Routes>
        <Route path="/secondPage" element={<SecondPage />} />
      </Routes>
    </div>
  )
}

解决办法：把Home设为路由的element，只有访问/时才渲染，切换到其他路由就会自动卸载：

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/secondPage" element={<SecondPage />} />
    </Routes>
  )
}

2. 嵌套路由导致Home作为父组件留存 #

如果你的路由是嵌套结构，Home是父路由组件，那切换子路由时Home不会卸载。比如：

<Route path="/" element={<Home />}>
  <Route path="secondPage" element={<SecondPage />} />
</Route>

这种情况下，跳转到/secondPage时，Home依然作为父组件挂载，只是子组件切换，所以componentWillUnmount自然不会触发。
解决办法：如果需要切换路由时卸载Home，把两个路由设为同级，不要嵌套。

3. 函数组件误用了类组件的卸载钩子 #

如果你的Home是函数组件，那根本不存在componentWillUnmount这个钩子！函数组件的卸载逻辑要写在useEffect的返回清理函数里。比如：

// 错误：函数组件里用componentWillUnmount无效
function Home() {
  componentWillUnmount() { /* 这代码根本不会执行 */ }
  // ...
}

// 正确写法：用useEffect的清理函数
function Home() {
  useEffect(() => {
    // 挂载时添加事件监听器
    const handleScroll = () => { /* 逻辑 */ };
    window.addEventListener('scroll', handleScroll);
    
    // 清理函数，组件卸载时自动执行
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); // 空依赖数组确保只在挂载和卸载时执行
  // ...
}

4. 事件监听器引用不稳定，看起来像没卸载 #

有时候不是componentWillUnmount没触发，而是你移除监听器时用的是新的函数引用，导致移除失败。比如：

// 错误示例：每次渲染都会创建新的匿名函数
class Home extends React.Component {
  componentDidMount() {
    window.addEventListener('scroll', () => console.log('滚动了'));
  }
  componentWillUnmount() {
    // 这里的匿名函数和挂载时的不是同一个引用，移除无效
    window.removeEventListener('scroll', () => console.log('滚动了'));
  }
}

解决办法：确保绑定和移除的是同一个函数引用，比如用类属性箭头函数：

class Home extends React.Component {
  // 类属性箭头函数，引用稳定
  handleScroll = () => console.log('滚动了');

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }
}

5. 组件被缓存逻辑包裹 #

如果你的Home组件被React.memo之外的缓存组件（比如第三方的KeepAlive库）包裹，可能会让组件保持存活状态，不会触发卸载钩子。
解决办法：检查组件的包裹层，移除不必要的缓存逻辑，或者确保缓存组件在路由切换时正确卸载目标组件。

先从路由配置开始排查，这是最常见的原因！如果还是不行，再检查组件类型和事件绑定的问题。

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