React-Bootstrap menus do not show the current selection

Question

For example, in the next image, the menu selected was about, the address string shows it, but the menu tab is still showing home

I am a newbie with Bootstrap

The code is this:

import React, { useState } from 'react';

import { Nav, NavDropdown } from 'react-bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

export default function NavSample() {
    const [key, setKey] = useState('home');

    const handleSelect = (key) => {
        setKey(key);
    };

    return (
        <Nav variant="pills" activeKey="home" onSelect={handleSelect} defaultActiveKey="home">
            <Nav.Item>
                <Nav.Link eventKey="home" href="/home">
                    Home
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="about" href="/about" title="about">
                    About
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="contact" href="/contact">Contact</Nav.Link>
            </Nav.Item>
            <NavDropdown title="Pricing" id="nav-dropdown">
                <NavDropdown.Item eventKey="Basic pricing" href="/pricing/basic pricing">Basic</NavDropdown.Item>
                <NavDropdown.Item eventKey="Corporate Pricing" href="/pricing/corporate pricing">Corporates</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item eventKey="Enterprise Pricing" href="/pricing/enterprise pricing">Enterprise</NavDropdown.Item>
            </NavDropdown>
        </Nav>
    );
}

What am I missing?

Rafael

Answer 1

So to deal with state resets you need to use React router for your routes instead of just hrefs

You need to install react-router-dom and react-router-bootstrap packages as well.

Here's a working example:

import 'bootstrap/dist/css/bootstrap.min.css';

import React, { useState } from 'react';
import { Nav, NavDropdown } from 'react-bootstrap';
import { BrowserRouter as Router } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';

export default function NavTabs({ active_key }) {
  const [key, setKey] = useState(active_key);

  const handleSelect = (key) => {
    console.log(`selected ${key}`);
    setKey(key);
  };

  console.log(`Rendering with ${key}`);
  return (
    <Router>
      <Nav variant="pills" activeKey={key} onSelect={handleSelect}>
        <LinkContainer to="/home">
          <Nav.Link eventKey="home">Home</Nav.Link>
        </LinkContainer>
        <LinkContainer to="/about">
          <Nav.Link eventKey="about" title="about">
            About
          </Nav.Link>
        </LinkContainer>
        <LinkContainer to="/contacts">
          <Nav.Link eventKey="contact">Contact</Nav.Link>
        </LinkContainer>
        <NavDropdown title="Pricing" id="nav-dropdown">
          <NavDropdown.Item eventKey="Basic pricing" href="/pricing/basic pricing">
            Basic
          </NavDropdown.Item>
          <NavDropdown.Item eventKey="Corporate Pricing" href="/pricing/corporate pricing">
            Corporates
          </NavDropdown.Item>
          <NavDropdown.Divider />
          <NavDropdown.Item eventKey="Enterprise Pricing" href="/pricing/enterprise pricing">
            Enterprise
          </NavDropdown.Item>
        </NavDropdown>
      </Nav>
    </Router>
  );
}

and when you use this component (e.g. from <App>), supply the starting tab:

function App() {
  return (<NavTabs active_key="home"/>)
}