title: How to set active link in Navbar using Nav.Link and React Router?
body: <p>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.</p>
  
  <p>Here it says to use Navbar, Nav, and Nav.Link <a href="https://react-bootstrap.github.io/components/navs/#nav-link-props" rel="nofollow noreferrer">https://react-bootstrap.github.io/components/navs/#nav-link-props</a> so I want to use these.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>class Header extends Component {
    render() {
      return (
        &lt;Navbar bg="light" variant="light" fixed="top"&gt;
          &lt;Navbar.Brand href="#"&gt;MySite&lt;/Navbar.Brand&gt;
          &lt;Nav&gt;
            &lt;Nav.Link href="/" activeClassName="active" eventKey="/"&gt;Home&lt;/Nav.Link&gt;
            &lt;Nav.Link href="/one" activeClassName="active" eventKey="/one"&gt;One&lt;/Nav.Link&gt;
            &lt;Nav.Link href="/two" activeClassName="active" eventKey="/two"&gt;Two&lt;/Nav.Link&gt;
          &lt;/Nav&gt;
        &lt;/Navbar&gt;
      )
    }
  }
  
  class App extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;div className="App"&gt;
            &lt;Route path="/" exact strict component={Redcircle} /&gt;
            &lt;Route path="/one" exact strict component={Bluesquare} /&gt;
            &lt;Route path="/two" exact strict component={Greentriangle} /&gt;
          &lt;/div&gt;
          &lt;/Router&gt;
      );
    }
  }
  </code></pre>
  
  <p>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</p>