为什么浏览器中没有出现导航栏链接？

Question

这是我在 React 中为导航栏编写的代码...我使用了 React-Bootstrap

import React from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import { NavLink } from "react-router-dom";

const MyNavBar = () => {
  return (
    <Navbar bg="dark" variant="dark" expand="lg">
      <Container>
        <Navbar.Brand href="/">
          <img
            src="https://static.vecteezy.com/system/resources/previews/000/606/489/original/vector-letter-a-logo-slice-logo-design-concept-template.jpg"
            width="30"
            height="30"
            className="d-inline-block align-top"
            alt="logo"
          />
          Aritra Debnath
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav">
          <Nav className="me-auto">
            <NavLink exact to="/" className="nav-link" activeClassName="active">Home</NavLink>
            <NavLink exact to="/projects" className="nav-link" activeClassName="active">Projects</NavLink>
            <NavLink exact to="/contact" className="nav-link" activeClassName="active">Contact</NavLink>
          </Nav>
        </Navbar.Toggle>
      </Container>
    </Navbar>
  );
};

export default MyNavBar;

一切看起来都很完美，但由于某种原因，导航链接没有出现在浏览器中...... 请帮我解决这个问题

Answer 1

Navbar.Toggle 应环绕 Nav 组件，而不是放置在其中。

<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
      <Nav className="me-auto">
        <NavLink exact to="/" className="nav-link" activeClassName="active">Home</NavLink>
        <NavLink exact to="/projects" className="nav-link" activeClassName="active">Projects</NavLink>
        <NavLink exact to="/contact" className="nav-link" activeClassName="active">Contact</NavLink>
      </Nav>
</Navbar.Collapse>

如果这不是问题，它也可能出现在您调用 MyNavBar 组件的部分或 CSS 中。 另请确保在 BrowserRouter 中关闭您的应用程序：

<BrowserRouter>
  <App />
</BrowserRouter>