title: react router nav links not updating on route change
body: <p>I have a component with header and sidebar which wraps the routers of my application, the problem I'm having is that <code>&lt;NavLink&gt;</code> are not updating on the route change assuming that the cause of this problem is that they are above the router and hence not affected by the change, i tried every way possible but no solution, how can i make the <code>&lt;NavLink&gt;</code> add the <code>active</code> class to the current route ?</p>
  
  <p>here is my app.js</p>
  
  <pre><code>&lt;Switch&gt;
      &lt;Route path="/login" component={ Login } /&gt;
      &lt;PrivateRoute path="/" component={ Dashboard } exact /&gt;
      &lt;PrivateRoute path="/members" component={ Members } exact /&gt;
      &lt;PrivateRoute path="/payments" component={ Bills } exact /&gt;
      &lt;PrivateRoute path="/gas-stations" component={ GasStations } exact /&gt;
      &lt;PrivateRoute path="/transactions" component={ Transaction } exact /&gt;
      &lt;PrivateRoute path="/cms" component={ CMS } /&gt;
      &lt;PrivateRoute path="/members/:member_id" component={ Member } /&gt;
      &lt;PrivateRoute path="/gas-stations/:gs" component={ GS } /&gt;
      &lt;PrivateRoute path="/transactions/:transaction_id" component={ FoundTransaction } /&gt;
      &lt;PrivateRoute path="/payments/:payment_id" component={ Payment } /&gt;
  &lt;/Switch&gt;
  </code></pre>
  
  <p>my private-routes.js</p>
  
  <pre><code>import React from 'react';
  import { Route, Redirect, withRouter } from 'react-router-dom';
  import { connect } from 'react-redux';
  import Container from 'components/container';
  
  const PrivateRoute = ({ component : Component, authenticated, ...rest }) =&gt; {
    return (
      &lt;Route { ...rest } render={ (props) =&gt; (
        authenticated === true
        ? &lt;Container&gt; // this is the component that wraps the header and the sidebar
            &lt;Component { ...props } /&gt;
          &lt;/Container&gt;
        : &lt;Redirect to="/login" /&gt;
      ) } /&gt;
    )
  }
  
  const state_to_props = (state, prop) =&gt; {
    return {
      authenticated : state.authenticated
    }
  }
  
  export default connect(state_to_props)(withRouter(PrivateRoute));
  </code></pre>
  
  <p>container.js</p>
  
  <pre><code>return (
  
    &lt;div&gt;
  
      &lt;Header /&gt;
  
      &lt;SideMenu /&gt;
  
      &lt;div className="app-content"&gt;
  
          { props.children }
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  )
  </code></pre>
  
  <p>side-menu.js</p>
  
  <pre><code>      &lt;li&gt;
         &lt;NavLink to="/" exact&gt; &lt;span&gt;Dashboard&lt;/span&gt; &lt;/NavLink&gt;
        &lt;/li&gt;
        &lt;li&gt;
         &lt;NavLink exact to="/members"&gt; &lt;span&gt;Members&lt;/span&gt; &lt;/NavLink&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;NavLink exact to="/gas-stations"&gt; &lt;span&gt;Gas Stations&lt;/span&gt; &lt;/NavLink&gt;
        &lt;/li&gt;
        &lt;li&gt;
         &lt;NavLink exact to="/payments"&gt; &lt;span&gt;Payments&lt;/span&gt; &lt;/NavLink&gt;
        &lt;/li&gt;
        &lt;li&gt;
         &lt;NavLink exact to="/transactions"&gt; &lt;span&gt;Transactions&lt;/span&gt; &lt;/NavLink&gt;
        &lt;/li&gt;
        &lt;li&gt;
         &lt;NavLink exact to="/cms"&gt; &lt;span&gt;CMS&lt;/span&gt; &lt;/NavLink&gt;
        &lt;/li&gt;
  </code></pre>
  
  <p>how can i update this component so the <code>&lt;NavLink&gt;</code> keep on adding the 'active' class to the right item in the sidebar ?</p>