MERN栈TODO项目运行遇React报错Target container is not a DOM element求助

问题修复方案 #

1. 直接触发Target container报错的根源问题 #

index.html中根容器设置的是class="root"，但index.js中使用document.getElementById('root')通过ID选择器检索容器，无法匹配到对应DOM元素。
修复操作：将index.html中的根div属性调整为id：

<!-- 原代码 -->
<div class="root">  
</div>
<!-- 修改后代码 -->
<div id="root">  
</div>

2. 预修复后续触发的路由报错 #

App.js中react-router-dom导入语句别名配置错误，会导致路由功能失效：
原错误导入语句将BrowserRouter的别名设为Link，Router未正确绑定BrowserRouter实例：

// 错误代码
import {BrowserRouter as Link, Router, Route} from 'react-router-dom';

修改为正确的导入格式：

// 修正后代码
import {BrowserRouter as Router, Link, Route} from 'react-router-dom';

3. 可选修复项（避免Bootstrap导航折叠功能失效） #

导航栏折叠按钮的data-target属性缺少ID选择器标识#，修改为：

<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavBar">

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