我用过react Bootstrap navbar,也用过react-scroll
来平滑导航。它工作的很好,但是在响应模式下点击任何导航项时navbar都不会折叠。
软件包
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>
5条答案
按热度按时间emeijp431#
也有同样的问题。我发现如果我们为Nav.Link项添加“eventKey”,“collapseOnSelect”就可以正常工作
示例:
1rhkuytd2#
我遇到了同样的问题,通过重新插入Bootstrap的Nav.Link解决了这个问题。下面是根据您的代码它将如何工作:
qxsslcnc3#
React Bootstrap中的已知问题是,当我们单击菜单项时,它不会自动隐藏菜单,下面提到的代码可以帮助您实现相同的功能。
一个不需要jQuery简单解决方法:
或者如果您仍在使用ES5:
onSelect
回调返回什么似乎并不重要。hjqgdpho4#
我也遇到了同样的问题,找到了解决办法。
必须将expand属性添加到导航栏组件。
mqxuamgl5#
只要在
<Nav.link/>
中使用eventKey="2"
就可以了。