React bootstrap navbar collapse not working

Question

I have used react bootstrap navbar also used react-scroll for smooth navigation. It's working fine but navbar is not collapsing when clicking any nav item in the responsive mode.

Packages

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

<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>

Solution 1

Had the same issue. I found that "collapseOnSelect" works if we add "eventKey" for Nav.Link item

Example:

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>

Solution 2

I had the same issue and resolved it by putting Bootstrap's Nav.Link back in. Here's how it would work based on your code :

<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>

Solution 3

it's know issue in React Bootstrap that when we clicked on menu item it will not hide the menu automatically, below mentioned code help you to achieve the same.

An easy workaround that doesn't require jQuery:

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

or if you're still using ES5:

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

It doesn't seem to matter what the onSelect callback returns.

Comments

[jme11]

This saved me from a complete meltdown today!

[Frankinstyyn]

Bro, if I could kiss you, I so would do it right now! This helped massively, so thank you!! <3

[Sandrin Joy]

Thanks, I was not using <Nav.link> instead i was directly using <NavLink> from react-router-dom. When I wrapped it in <Nav.Link> and added eventkey , it worked .