Блог

Главная - Вопросы по программированию - React продолжает загружаться при использовании Bootstrap

React продолжает загружаться при использовании Bootstrap

#reactjs #bootstrap-4

Вопрос:

Когда я использую следующий код для панели навигации без каких-либо ссылок, React запускается нормально и отображает панель навигации.

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

Однако, когда я добавляю ссылки с помощью <Nav.Link>, 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>
  );
}

Ответ №1:

Пожалуйста, проверьте это перед:

  1. Убедитесь, что вы установили react-bootstrap .
  2. Убедитесь, что вы импортировали необходимые компоненты, как здесь import { Navbar, Container, Nav } from "react-bootstrap";
  3. Убедитесь, что вы экспортируете то же самое, используя 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 , как включить загрузку одной страницы.
Ссылка

Комментарии:

1. Спасибо. Однако я обнаружил проблему. Это было потому, что мой компонент также назывался 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>
      );
    }
Метки: