使用react-router-bootstrap的LinkContainer报Element type is invalid错误如何解决

• 版本不兼容：从App.js使用的<Routes>组件可判断你使用的是react-router-dom v6版本，低于v0.26.0的react-router-bootstrap版本不支持react-router-dom v6，导出的LinkContainer为无效对象而非可渲染组件，触发类型错误。
• 导入方式错误：部分react-router-bootstrap版本的LinkContainer需使用默认导入而非命名导入，命名导入会拿到包含多个导出项的对象而非组件本身。
• JSX语法错误：Header组件代码中登录入口的<LinkContainer>内部存在多余的无效文本[enter image description here][1]，属于非法JSX内容，也会触发渲染异常。

1. 升级react-router-bootstrap到兼容react-router-dom v6的最新版本，执行安装命令：

npm install react-router-bootstrap@latest
# 若使用yarn则执行
yarn add react-router-bootstrap@latest

2. 修正LinkContainer的导入语句，将Header组件中的导入代码替换为：

import LinkContainer from 'react-router-bootstrap/LinkContainer'

3. 清理Header组件中的无效JSX内容，删除登录入口<LinkContainer>内部的[enter image description here][1]残留字符，修正后对应代码为：

<LinkContainer to="/login">
  <Nav.Link ><i className="fas fa-user"></i>Login</Nav.Link>    
</LinkContainer>

4. 若仍报错，删除项目根目录下的node_modules文件夹、package-lock.json（或yarn.lock）文件，重新执行npm install（或yarn install）安装依赖后重启项目即可。

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