'React bootstrap navbar collapse not working

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:^[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:^[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:^[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.

Solution 4:^[4]

just use eventKey="2" inside <Nav.link/> . It will works fine for react js .

Solution 5:^[5]

I had the same problem, found a fix.

It is must to add expand attribute to your Navbar Component.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ivan Andreev-Savchuk
Solution 2
Solution 3	Dhaval Patel
Solution 4	alex01011
Solution 5	Hassaan Raza

'React bootstrap navbar collapse not working

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]