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

Question

When I use the following code for a navbar without any links, React started up fine and displays the navbar.

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

However, when I add links using <Nav.Link> React just keeps loading and I can't even right-click to view the console.

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>
  );
}

Answer 1

Please check this before:

1. Make sure you have installed react-bootstrap .
2. Make sure you have imported the required components like here import { Navbar, Container, Nav } from "react-bootstrap";
3. Make sure you are exporting the same using export default <component_name> .

I have restructured your code as

<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>

Also like to suggest you to explore react-router to enable single page loading. Link

Answer 2

The issue was solved by changing to component name:

 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>
      );
    }