How to set active link in Navbar using Nav.Link and React Router?

Question

I want to include a very basic Navbar on my site using React Router but either the styles or routes get messed up depending on what I change.

Here it says to use Navbar, Nav, and Nav.Link https://react-bootstrap.github.io/components/navs/#nav-link-props so I want to use these.

The problem is, it seems to me that the Nav.Link needs the href attribute to send the user to that route, for example /One. But then the One link at the top doesn't get active styles. If I remove the href attribute, it gets the active styles when I click on that link, but doesn't send the user to /One or load the component I want for that route obviously.

I don't see a SO answer about this that uses these tags, just answers using Link and NavLink which the URL I linked doesn't use. There isn't an example on that page either that uses multiple href attributes. What am I missing? Below is my code.

class Header extends Component {
  render() {
    return (
      <Navbar bg="light" variant="light" fixed="top">
        <Navbar.Brand href="#">MySite</Navbar.Brand>
        <Nav>
          <Nav.Link href="/" activeClassName="active" eventKey="/">Home</Nav.Link>
          <Nav.Link href="/one" activeClassName="active" eventKey="/one">One</Nav.Link>
          <Nav.Link href="/two" activeClassName="active" eventKey="/two">Two</Nav.Link>
        </Nav>
      </Navbar>
    )
  }
}

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path="/" exact strict component={Redcircle} />
          <Route path="/one" exact strict component={Bluesquare} />
          <Route path="/two" exact strict component={Greentriangle} />
        </div>
        </Router>
    );
  }
}

Expected result: Navbar that changes url to /one, loads component Bluesquare, and makes the word One in the Navbar have active styles Actual result: Either route loads or One has active styles

Answer 1

You missed activeKey prop from Nav component. Just pass the param from router HOC

UPD: activeClassName provides by react-router-dom component, and as you can see Nav.Link has active prop, but there is no any relations between them.

The simplest way to resolve your issue is passing current path to activeKey prop in Nav component, and current path you may get from pathname field in location prop which provides by withRouterHOC.

UPD2: Here is playground

Answer 2

Modify your code like this.. It's working properly:

function Header()
{
    return(
        <Router>
        <div >
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="/" eventKey="/">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="/footer" activeClassName="active" eventKey="/">About</Nav.Link>
          <Nav.Link href="/count" activeClassName="active" eventKey="/">Count</Nav.Link>

          <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
          </NavDropdown>
        </Nav>
        <Nav>
          <Nav.Link href="#deets">More deets</Nav.Link>
          <Nav.Link eventKey={2} href="#memes">
            Dank memes
          </Nav.Link>
        </Nav>
        </Navbar.Collapse>
        </Navbar>
              </div>
              <Switch>
              <Route exact path='/'/>
                <Route path='/count' component={Count} />
                <Route path='/footer' component={Footer} />

              </Switch>
                </Router>
    );
}