title: Active NavLink to parent element
body: <p>I'm using React Router v4 and I have a case where on my navigation links, I want to enable the <code>active</code> className to the <code>NavLink</code> parent element, not the <code>NavLink</code> itself.</p>
  
  <p>Is there a way to access the path (<code>match</code>) even though I'm not inside the <code>Switch</code> element?</p>
  
  <p>Or do I have to keep state? Because I'm feeling it's kinda missing the idea of router.</p>
  
  <p>Here's my example, I want to apply the <code>active</code> className to <code>li</code> element not <code>NavLink</code>:</p>
  
  <pre><code>const {
    HashRouter,
    Switch,
    Route,
    Link,
    NavLink,
  } = ReactRouterDOM
  
  const About = () =&gt; (
      &lt;article&gt;
          My name is Moshe and I'm learning React and React Router v4.
      &lt;/article&gt;
  );
  
  const Page = () =&gt; (
      &lt;Switch&gt;
        &lt;Route exact path='/'  render={() =&gt; &lt;h1&gt;Welcome!&lt;/h1&gt;} /&gt;
        &lt;Route path='/about' component={About}/&gt;
      &lt;/Switch&gt;
  );
  
  const Nav = () =&gt; (
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;NavLink exact to="/"&gt;Home&lt;/NavLink&gt;&lt;/li&gt;
              &lt;li&gt;&lt;NavLink to="/about"&gt;About&lt;/NavLink&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  );
  
  class App extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;Nav /&gt;
                  &lt;Page /&gt;
              &lt;/div&gt;
          );
      }
  }
  ReactDOM.render((
      &lt;HashRouter&gt;
          &lt;App /&gt;
      &lt;/HashRouter&gt;),
      document.querySelector("#app"));
  </code></pre>
  
  <p><a href="https://codepen.io/moshem/pen/ypzmQX" rel="noreferrer">https://codepen.io/moshem/pen/ypzmQX</a></p>