使用Bootstrap <Nav.Link>组件时React页面持续加载无响应如何解决

你遇到的是组件命名冲突导致的无限递归渲染问题：
你自定义的导航组件命名为Nav，和你从react-bootstrap中导入的Nav组件重名。当你在组件内部使用<Nav>标签渲染导航容器时，实际调用的是你自己定义的这个Nav组件，而非react-bootstrap提供的Nav组件，形成「组件渲染自身」的无限递归，完全占满JS主线程，就会出现页面持续加载、无法唤起开发者工具的假死现象。

你初始版本代码中没有用到<Nav>标签，所以不会触发递归，页面可以正常渲染。

• 打开当前组件文件的导入语句，确认是否存在import { Nav } from 'react-bootstrap'这类导入，且自定义组件名称和导入的Nav完全重名
• 注释掉新增的<Nav>及内部的Nav.Link代码，确认页面可以恢复正常渲染，排除其他依赖、配置类问题

二选一即可：

1. 重命名自定义导航组件，改为不和react-bootstrap导出组件冲突的名称，比如AppNav、NavbarComponent：

function AppNav() {
  return (
    <Navbar bg="light" variant="light">
      <Container>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
        </Nav>
      </Container>
    </Navbar>
  );
}

2. 给导入的react-bootstrap Nav组件设置别名，避免重名：

// 导入时设置别名
import { Nav as BsNav, Navbar, Container } from 'react-bootstrap'

function Nav() {
  return (
    <Navbar bg="light" variant="light">
      <Container>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        {/* 用别名调用bootstrap的Nav组件 */}
        <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>
  );
}

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