React17+Vite项目出现Target container is not a DOM element错误求助

问题分析与修复方案 #

1. 修复路由组件的冗余嵌套与缺失依赖 #

项目的App.jsx存在多处路由相关错误，这是引发目标容器错误的核心原因：

• 多层路由容器嵌套：main.jsx已经用BrowserRouter包裹了整个应用，App.jsx里又重复嵌套了BrowserRouter和Router，导致React渲染上下文混乱。
• 未定义组件直接使用：路由中引用了NoPage组件但未导入。
• 错误使用底层组件：Router是react-router-dom的底层组件，v6版本中无需手动使用，直接用BrowserRouter即可。

修正后的App.jsx代码：

import React from "react";
import { Routes, Route } from "react-router-dom";
import './App.css';

import Home from "./pages/Home";
import Photos from "./pages/Photos";
import Cookies from "./components/Cookies";
// 务必导入NoPage组件，若暂未实现可注释该路由
import NoPage from "./pages/NoPage";

const App = () => {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />}>
          <Route index element={<Home />} />
          <Route path="photos" element={<Photos />} />
          <Route path="cookies" element={<Cookies />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App

2. 清理依赖冲突 #

package.json中同时安装了router-dom（v2.2.9）和react-router-dom（v6.6.1），两个包属于同一类路由库，版本冲突会导致模块加载异常，执行以下命令删除冗余依赖：

npm uninstall router-dom

3. 验证FontAwesome配置（可选） #

虽然错误出现于安装FontAwesome之后，但并非其直接导致。为避免样式冲突，可在main.jsx中添加FontAwesome的核心配置：

import { config } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';
// 禁用自动注入样式，适配Vite的样式处理逻辑
config.autoAddCss = false;

4. 确认DOM节点加载逻辑 #

index.html中已通过defer属性确保脚本在DOM加载完成后执行，id="root"的节点存在且无误，无需修改节点ID。

总结 #

优先修复路由组件的嵌套错误与依赖冲突，这两项是引发「Target container is not a DOM element」错误的主要原因。完成上述修改后重启开发服务，问题即可解决。

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