React bootstrap 导航栏折叠无法正常工作

Question

我已经使用了 React Bootstrap 导航栏，同时也用了 react-scroll 实现平滑的导航。它正常工作，但在响应式模式下，点击任何导航项时，导航栏不会折叠。

软件包

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { Link } from "react-scroll";
import { LinkContainer } from "react-router-bootstrap";
import { Navbar, Container, NavDropdown, Nav, Dropdown } from "react-bootstrap";

导航栏

<Navbar
    sticky="top"
    id="navbar"
    bg="light"
    expand="lg"
    className="navbar navbar-expand-lg navbar-light bg-light"
    collapseOnSelect={true}
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
    <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="ml-auto">
            <Link
                activeClass="active"
                to="features"
                spy={true}
                smooth={true}
                offset={-70}
                duration={800}
                className="nav-link"
                onClick={this.closeNavbar}
            >
                Features
            </Link>

            <Link
                activeClass="active"
                to="about"
                spy={true}
                smooth={true}
                offset={-70}
                duration={800}
                className="nav-link"
            >
                About
            </Link>
        </Nav>
    </Navbar.Collapse>
</Navbar>

- Kane

Answer 1

我遇到了同样的问题。我发现，如果我们为Nav.Link项添加"eventKey"，那么"collapseOnSelect"就可以起作用。

示例：

import { Link } from 'react-router-dom';
import { Nav, Navbar} from 'react-bootstrap';

 <Navbar collapseOnSelect  expand="lg">
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Nav className="mr-auto d-block">
          <Nav.Item>
            <Nav.Link eventKey="1" as={Link} to="/Home">
              Home
            </Nav.Link>
          </Nav.Item>
          <Nav.Item>
             <Nav.Link eventKey="2" as={Link} to="/Contant">
              Page Contant
            </Nav.Link>
          </Nav.Item>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

- Ivan Andreev-Savchuk

---

今天这个东西救了我一命！ - jme11

兄弟，如果我能亲吻你，我现在一定会这么做！这帮了我大忙，非常感谢！！<3 - Frankinstyyn

谢谢，我之前没有使用<Nav.link>，而是直接使用了来自react-router-dom的<NavLink>。当我将其包装在<Nav.Link>中并添加eventkey时，它就起作用了。 - Sandrin Joy

Answer 2

我遇到了同样的问题，并通过将Bootstrap的Nav.Link放回来解决了这个问题。以下是基于您的代码的操作步骤： "最初的回答"。

<Navbar sticky="top" id="navbar"className="navbar" collapseOnSelect bg="light expand="lg">
 <Navbar.Toggle aria-controls="basic-navbar-nav"/>
  <Navbar.Collapse id="basic-navbar-nav">
  <Nav className="ml-auto">
   <Nav.Link>
    <Link
      activeClass="active"
      to="features"
      spy={true}
      smooth={true}
      offset={-70}
      duration={800}
      className="nav-link"
      >
      Features
    </Link>
   </Nav.Link>
  </Nav>
 </Navbar.Collapse>
</Navbar>

- szewah

Answer 3

我曾遇到相同的问题，找到了解决方法。

为你的导航栏组件添加 expand 属性是必要的。

<Navbar variant="dark" expand="lg">

- Hassaan Raza

Answer 4

在React Bootstrap中，已知一个问题是当我们点击菜单项时，菜单不会自动隐藏。下面的代码可以帮助你实现相同的效果。

一种简单的解决方法，不需要使用jQuery：

<DropdownButton title={buttonTitle} onSelect={() => null}>

或者如果您仍在使用ES5：

<DropdownButton title={buttonTitle} onSelect={function() {}}>

无论 onSelect 回调函数返回什么，似乎都没有影响。

- Dhaval Patel

Answer 5

只需在<Nav.link/>内使用eventKey="2"。这对于React JS来说非常有效。

- samim momen