使用 Bootstrap <Nav.Link> 时 React 不断加载答案

【问题标题】：React keeps loading when using Bootstrap <Nav.Link>使用 Bootstrap <Nav.Link> 时 React 不断加载
【发布时间】：2021-12-24 04:54:02
【问题描述】：

当我将以下代码用于没有任何链接的导航栏时，React 启动正常并显示导航栏。

function Nav() {
  return (
    <Navbar bg="light" variant="light">
      <Container>
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
      </Container>
    </Navbar>
  );
}

但是，当我使用添加链接时，React 一直在加载，我什至无法右键单击查看控制台。

function Nav() {
  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>
  );
}

【问题讨论】：

标签： reactjs bootstrap-4

【解决方案1】：

请在此之前检查一下：

确保您已安装react-bootstrap。
确保您已导入所需的组件，如此处import { Navbar, Container, Nav } from "react-bootstrap";
确保使用export default <component_name> 导出相同的内容。

我已将您的代码重组为

<Navbar bg="dark" expand="lg" variant="dark">
  <Container>
    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
    <Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
      <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>
    </Navbar.Collapse>
  </Container>
</Navbar>

还建议您探索react-router 以启用单页加载。 Link

【讨论】：

谢谢。但是，我发现了问题。这是因为我的组件也称为 Nav。一旦我将组件更改为 TopNav，它就可以正常工作了。

【解决方案2】：

问题已通过更改为组件名称解决：

 import { Navbar, Container, Nav } from "react-bootstrap";
    
    function TopNav() {
      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>
      );
    }

【讨论】：