引入react-bootstrap后编译成功但React应用无法加载问题求助

你自定义的导航组件命名为Nav，同时未引入react-bootstrap官方提供的Nav组件，代码内部使用的<Nav>标签实际指向你自己编写的自定义Nav组件，触发了无限递归渲染的死循环，持续占用浏览器资源，因此会出现编译通过但页面加载卡顿、浏览器提示运行缓慢的问题。

• 第一步：解决命名冲突，以下两种方案二选一即可：
  1. 修改自定义导航组件的命名，避免和react-bootstrap的内置组件重名，比如将组件名改为MyNavbar
  2. 引入react-bootstrap的Nav组件时设置别名，导入语句写为import { Nav as BsNav } from 'react-bootstrap'，后续内部调用时使用<BsNav>替代原有<Nav>
• 第二步：补充缺失的react-bootstrap Nav组件导入，你当前的Nav组件代码只导入了Navbar和Container，未导入需要用到的Nav组件

修改后参考代码 #

自定义导航组件（路径：./components/nabvar/Nav.js） #

import React from 'react'
import Navbar  from 'react-bootstrap/Navbar'
import Container  from 'react-bootstrap/Container'
// 补充导入react-bootstrap的Nav组件，设置别名避免命名冲突
import { Nav as BsNav } from 'react-bootstrap'

// 自定义组件改名避免混淆
const MyNavbar = () => {
  return (
    <Navbar bg="dark" variant="dark">
      <Container>
      <Navbar.Brand href="#home">Navbar</Navbar.Brand>
      <BsNav className="me-auto">
        <BsNav.Link href="#home">Home</BsNav.Link>
        <BsNav.Link href="#features">Features</BsNav.Link>
        <BsNav.Link href="#pricing">Pricing</BsNav.Link>
      </BsNav>
      </Container>
    </Navbar>
  )
}

export default MyNavbar

App.js调整引用 #

/* import logo from './logo.svg'; */
import './App.css';
// 对应修改导入的组件名
import MyNavbar from './components/nabvar/Nav';

function App() {
  return (
    <div className="App">
      <MyNavbar/>
    </div>
  );
}

export default App;

后续遇到编译正常但页面卡顿崩溃的问题，可优先排查是否存在无限递归渲染、未销毁的循环定时器、无虚拟滚动的超大量列表渲染这类持续消耗资源的逻辑，通过浏览器开发者工具的性能面板录制渲染过程，查看调用栈是否存在同一组件重复调用的情况，可快速定位死循环问题。

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