title: Integrate React router active NavLink with child component
body: <p>My menu currently looks like this:</p>
  
  <pre><code>&lt;Menu&gt;
      &lt;MenuItem text="link1" /&gt;
      &lt;MenuItem text="link2" /&gt;
  &lt;/Menu&gt;
  </code></pre>
  
  <p>To integrate with <code>react-router-dom</code>, I modified in the following way:</p>
  
  <pre><code>&lt;Menu&gt;
  
      &lt;NavLink to="link1"&gt;
          &lt;MenuItem text="link1" /&gt;
      &lt;/NavLink&gt;
  
      &lt;NavLink to="link2"&gt;
          &lt;MenuItem text="link2" /&gt;
      &lt;/NavLink&gt;
  
  &lt;/Menu&gt;
  </code></pre>
  
  <p>My <code>MenuItem</code> Component supports styling of the currently "active" link like so:</p>
  
  <pre><code>&lt;MenuItem active text="link1" /&gt;
  </code></pre>
  
  <p>How do I integrate the "active" route styling with <code>react-router-dom</code> ?</p>
  
  <p>Is there some boolean I can set in the following way?</p>
  
  <pre><code>&lt;MenuItem active={isRouteActive} text="link1" /&gt;
  </code></pre>
  
  <p><strong>Edit:</strong> <a href="http://blueprintjs.com/docs/v2/#core/components/menu.menu-item" rel="noreferrer"><code>MenuItem</code></a> is a component from Blueprintjs. When the <code>active</code> prop is set, its possible some internal styling rules are applied to the component. I could use the <code>activeClassName</code> prop on <code>NavLink</code> but I don't want to replicate the css of a 3rd party component.</p>