Why stays React Bootstrap Navbar collapsed?

Question

I followed the React-Bootstrap documentation, especially this piece of code to make my navbar -> https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly

However, I cleaned the session of my app from Google Chrome and my navbar seems to stay collapsed.

I searched the internet without success because I am not really sure what the problem is and where it comes from?

There is my <Navbar/>'s code

import React from 'react'
import { 
    Navbar as BoostrapNavBar,
    Nav,
    NavItem,
    MenuItem,
    NavDropdown } from 'react-bootstrap';
import { Link } from 'react-router-dom';

export default class Navbar extends React.Component {

    render () {
        return (
            <BoostrapNavBar inverse collapseOnSelect>
                <BoostrapNavBar.Header>
                    <BoostrapNavBar.Brand>
                        <a href="/">{this.props.navbar_title}</a>
                    </BoostrapNavBar.Brand>
                    <BoostrapNavBar.Toggle />
                </BoostrapNavBar.Header>
                <BoostrapNavBar.Collapse>
                    <Nav pullRight>
                    <NavItem componentClass={Link} href="/collections" to="/collections">Collections</NavItem>
                        <NavItem componentClass={Link} href="/bracelets" to="/bracelets">Bracelets</NavItem>
                        <NavItem componentClass={Link} href="/glasses" to="/glasses">Lunettes</NavItem>
                        <NavItem componentClass={Link} href="/watches" to="/watches">Montres</NavItem>
                        <NavDropdown eventKey={3} title="Support" id="basic-nav-dropdown"> 
                            <MenuItem componentClass={Link} href="/support" to="/support">Messages</MenuItem> 
                            <MenuItem componentClass={Link} href="/new_message" to="/new_message">Contacter le Support</MenuItem> 
                        </NavDropdown>
                        <NavItem componentClass={Link} href="/login" to="/login"><img src={'../resources/images/user.png'} alt="User"/></NavItem>
                        <NavItem componentClass={Link} href="/shopping_bag" to="/shopping_bag"><img src={'../resources/images/shopping-bag.png'} alt="Shopping-Bag"/></NavItem>
                    </Nav> 
                </BoostrapNavBar.Collapse>
            </BoostrapNavBar>
        );
    }
}

Any help is welcome!

Based on comments:

<div id="root">
    <div>
        <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header"><a href="/" class="navbar-brand">ShopField</a><button type="button" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div>
                <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li role="presentation" class=""><a href="/collections">Collections</a></li>
                    <li role="presentation" class=""><a href="/bracelets">Bracelets</a></li>
                    <li role="presentation" class=""><a href="/glasses">Lunettes</a></li>
                    <li role="presentation" class=""><a href="/watches">Montres</a></li>
                    <li class="dropdown">
                        <a id="basic-nav-dropdown" role="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" href="#">Support <span class="caret"></span></a>
                        <ul role="menu" class="dropdown-menu" aria-labelledby="basic-nav-dropdown">
                            <li role="presentation" class=""><a href="/support" role="menuitem" tabindex="-1">Messages</a></li>
                            <li role="presentation" class=""><a href="/new_message" role="menuitem" tabindex="-1">Contacter le Support</a></li>
                        </ul>
                    </li>
                    <li role="presentation" class=""><a href="/login"><img src="../resources/images/user.png" alt="User"></a></li>
                    <li role="presentation" class=""><a href="/shopping_bag"><img src="../resources/images/shopping-bag.png" alt="Shopping-Bag"></a></li>
                </ul>
                </div>
            </div>
        </nav>
        <div>Home Page</div>
    </div>
</div>

Answer 1

This feature works fine with react-bootstrap 1.3.0. It has bootstrap 4.5 with it.

Answer 2

Here is a working sample of Bootstrap 4.

Pre-requisites:

npm install --save bootstrap@4.0.0
npm install --save reactstrap@next
npm install --save jquery@1.9.1
npm install --save react-transition-group
npm install --save react-popper
npm install react-router-bootstrap --save

Make sure you have react-router-bootstrap installed. LinkContainer is the component that will make the link clickable. It must be placed outside of DropdownItem for it to work in Firefox. Also, adding className="collapse" to Collapse component will hide the menu initially in Firefox.

import React, { Component } from 'react';
import logo from '../img/logo_header.png';
import { LinkContainer } from 'react-router-bootstrap';
import { Button, ButtonGroup, NavDropdown, Collapse, Navbar, 
    NavbarToggler, NavbarBrand, Nav, NavItem, NavLink,
    Dropdown, DropdownMenu, DropdownToggle, DropdownItem, UncontrolledDropdown } from 'reactstrap';

class MyComponent extends Component{
    constructor(props) {
        super(props);

        this.toggleNavbar = this.toggleNavbar.bind(this);
        this.state = {
            isOpen: false
        };
    }

    toggleNavbar() {
        this.state.isOpen = App.myVar.isNavBarOpen; //fixes next time route change where isOpen=true
        let isOpen = !this.state.isOpen; //fixes initial delay in calling setState(), where clicking first time didn't open NavBar
        this.setState({
            isOpen: isOpen
        });
        App.myVar.isNavBarOpen = isOpen;
    }
    render(){
    return (
      <div>            
        <Navbar color="faded" light expand="md">
            <NavbarBrand href="/">
                <a href="http://example.com/" target="_blank"><img src={logo} alt="Logo" /></a>
                <a href="http://example.com/" target="_blank"><h2 className="header-title">My Site</h2></a>
            </NavbarBrand>                
            <NavbarToggler onClick={this.toggleNavbar} />
            <Collapse isOpen={App.myVar.isNavBarOpen} navbar className="collapse">
              <Nav className="ml-auto" navbar>
                <NavItem><LinkContainer to="/admin"><NavLink>Home</NavLink></LinkContainer></NavItem>
                <UncontrolledDropdown nav inNavbar>
                  <DropdownToggle nav caret>
                    Link 1
                  </DropdownToggle>
                  <DropdownMenu >
                    <LinkContainer to="/sub-link1">
                        <DropdownItem>Sub Link 1</DropdownItem>
                    </LinkContainer>
                  </DropdownMenu>
                </UncontrolledDropdown>                    
                <LinkContainer to="/logout">
                    <NavItem><NavLink>Logout</NavLink></NavItem>                                        
                </LinkContainer>
              </Nav>
            </Collapse>
        </Navbar>
      </div>
    )
    }
}

export default MyComponent;

There was bug where if we click on a menu link, the route would change but the NavBar menu would remain open, thus, we needed to use a global variable at the parent Component eg. index.js to manage it's open state.

App.js

App.myVar = {
    isNavBarOpen: false
}

index.js

history.listen((location, action) => {    
    App.myVar.isNavBarOpen = false; //use global variable to manage NavBar isOpen in nested component
});

Answer 3

Edit:

At present, React Bootstrap is for Bootstrap 3 only.

To fix your issue, follow the solution I outlined in this answer:

https://stackoverflow.com/a/48627104/8270343

Once React Bootstrap becomes compatible with Bootstrap 4, the following information will become relevant:

It stays collapsed because you don't have the navbar-expand-* class in your navbar. That responsive class tells Bootstrap from which breakpoint onwards the navbar has to expand.

So, if you want it to expand from the lg breakpoint onwards i.e. make it expand for screens that are large (lg) and larger, then you need to add the navbar-expand-lg class to your navbar.

That means: In your case, your react code needs to be adjusted so that this class is included in the HTML output for the navbar.

You'll find more info about this class here:

https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors