React触发navigate出现Failed to execute 'removeChild'报错求解决

算力阿峰

2026-8-13

问题分析与解决方案

这个错误Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node通常是因为React虚拟DOM与真实DOM结构不匹配，导致路由切换时React无法正确定位要移除的DOM节点。结合你的代码，问题根源及修复方式如下：

1. 冗余的`React.Children.map`与嵌套Fragment

你的BasicLayout中对children做了不必要的React.Children.map处理，同时在渲染区域嵌套了多层Fragment（<>）。这种冗余操作会干扰React的DOM diff算法，导致路由切换时节点关系混乱。

修复方式：

简化BasicLayout的子元素渲染逻辑，直接渲染children即可，去掉多余的map和嵌套Fragment：

<>
  <Header {...props} />
  <div>
    <MenuComp {...props} />
    <div>
      Test
      {children}
    </div>
  </div>
</>

如果不需要额外DOM节点，也可以保留Fragment但移除map操作：

<>
  <Header {...props} />
  <div>
    <MenuComp {...props} />
    <>
      Test
      {children}
    </>
  </div>
</>

核心是移除React.Children.map——你的children是单个<Routes>元素，map操作完全多余，反而会破坏React的节点映射关系。

2. 检查`MenuComp`中`navigate`的使用规范

确保MenuComp通过react-router-dom提供的useNavigate钩子获取导航函数，避免错误的上下文或DOM操作：

// MenuComp.jsx
import { useNavigate } from 'react-router-dom';

const MenuComp = (props) => {
  const navigate = useNavigate();

  const handleMenuClick = (path) => {
    navigate(path);
  };

  return (
    // 菜单结构，触发handleMenuClick
  );
};

如果是类组件，需使用withRouter高阶组件包裹以获取导航能力，更推荐改用函数组件配合useNavigate。