折叠在选择 React Bootstrap Navbar 时 nextjs 不工作

Question

我正在使用带有 NextJs 的 react bootsrtap NavBar，但是选择时的折叠不起作用，当我按下任何链接时，导航栏没有折叠，它只是导航而不折叠。

import React from "react";
import { Nav, Navbar, Container } from "react-bootstrap";
import Link from "next/link";
import stylesNav from "./Navbar.module.css";

export default function Navigation() {
  return (
   <div>
      <Navbar
        collapseOnSelect
        fixed="top"
        className={stylesNav.topNavbar}
        expand="md"
        bg="dark"
        variant="dark"
      >
        <Container className={stylesNav.Cont}>
          <div className={stylesNav.scmpLogoNavbar}>
            <Link eventKey="0" href="/">
              <a className={` ${stylesNav.SCMP1}  ${stylesNav.Links}`}>SCMP</a>
            </Link>
          </div>

          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className={'me-auto'}></Nav>
            <Nav>

              <Link eventKey="1" href="/">
                <a className={stylesNav.navlink}>Home</a>
              </Link>

              <Link
                className={stylesNav.navlink}
                eventKey="2"
                href="/Departments"
              >
                <a className={stylesNav.navlink} >Departments</a>
              </Link>

              <Link
                className={stylesNav.navlink}
                eventKey="3"
                href="/Events"
              >
                <a className={stylesNav.navlink}>Events</a>
              </Link>

              <Link
                className={stylesNav.navlink}
                eventKey="3"
                href="/SWS"
              >
                <a className={stylesNav.navlink}>Startup-Weekend</a>

              </Link>

              <Link className={stylesNav.navlink} eventKey="4" href="/auth">
                <a className={stylesNav.navlink}>Login</a>
              </Link>

            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
);
}

我认为问题来自下一个/链接。 使用没有<a>的<Link>不会在其中呈现任何文本，而使用<Nav.Link as={Link} href="/" to="/"></Nav.Link>也不会t 解决问题。

Answer 1

解决方案：

    <Link  eventKey="1"  href="/"  passHref>
    <Nav.Link className={stylesNav.navlink}>Home</Nav.Link>  
    </Link>

用Link标签包装每个Nav.Link ，但使用passHref