react-bootstrap 5.1.3导航组件引入后触发应用无限循环问题

问题根因 #

你定义的自定义导航组件名称为Nav，且未从react-bootstrap库中导入官方的Nav组件，此时组件内部使用的<Nav>标签会被React识别为你当前定义的这个自定义组件本身，触发递归渲染，最终形成无限重渲染的死循环。

修复方案 #

• 修正Navigation.js的导入语句，补充引入react-bootstrap官方的Nav组件：

import { Container, Navbar, NavDropdown, Nav } from "react-bootstrap";

• （可选，推荐）修改你自定义组件的命名，避免和第三方库组件重名，降低后续维护出现命名冲突的概率，比如将组件名改为NavbarComponent，同步修改导出语句和App.js内的引入语句即可。

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