#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:
Пожалуйста, проверьте это перед:
- Убедитесь, что вы установили
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
, как включить загрузку одной страницы.
Ссылка
Комментарии:
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>
);
}