title: React Bootstrap change link of Navbar to active
body: <p>I use a Navbar as a component on page, which uses Router to change the content. Everything is working fine, so far. But I can´t figure out, how I can set the state of the links in the Navbar to active, when they are clicked. I think, I have to bind the activeKey of the Nav element to the location.pathname of the active content.</p>
  <p>This is my Navbar component:</p>
  <pre><code>import React from 'react';
  import { Navbar, Nav } from 'react-bootstrap';
  
  class Navbar extends React.Component{
  
      constructor() {
          super();
          this.state = {
            show: false
          };
        }
  
      render(){
          return(
              &lt;div&gt;
                  &lt;Navbar collapseOnSelect expand=&quot;lg&quot; bg=&quot;dark&quot; variant=&quot;dark&quot;&gt;
                      &lt;Navbar.Brand &gt;Filmmusic&lt;/Navbar.Brand&gt;
                      &lt;Navbar.Toggle aria-controls=&quot;responsive-navbar-nav&quot; /&gt;
                      &lt;Navbar.Collapse id=&quot;responsive-navbar-nav&quot;&gt;
                      &lt;Nav activeKey=&quot;/&quot; className=&quot;mr-auto&quot;&gt;
                          &lt;Nav.Link href=&quot;/&quot;&gt;Home&lt;/Nav.Link&gt;
                          &lt;Nav.Link href=&quot;/about&quot;&gt;About&lt;/Nav.Link&gt;
                          &lt;Nav.Link onClick = {()=&gt;{this.handleModal()}}&gt;Contact&lt;/Nav.Link&gt;
                      &lt;/Nav&gt;
                      &lt;Nav&gt;
                          &lt;Nav.Link href=&quot;/impressum&quot;&gt;Impressum&lt;/Nav.Link&gt;
                          &lt;Nav.Link href=&quot;/datenschutzerklaerung&quot;&gt;Datenschutzerklärung&lt;/Nav.Link&gt;
                      &lt;/Nav&gt;
                      &lt;/Navbar.Collapse&gt;
                  &lt;/Navbar&gt;
              &lt;/div&gt;
          )
      }
      
  }
  
  export default Navbar;
  </code></pre>