title: How do I add an active class to a Link from React Router?
body: <p>I've created a bootstrap-style sidebar using <code>Link</code>. Here is a snippet of my code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul className="sidebar-menu"&gt;
    &lt;li className="header"&gt;MAIN NAVIGATION&lt;/li&gt;
    &lt;li&gt;&lt;Link to="dashboard"&gt;&lt;i className="fa fa-dashboard"&gt;&lt;/i&gt; &lt;span&gt;Dashboard&lt;/span&gt;&lt;/Link&gt;&lt;/li&gt;
    &lt;li&gt;&lt;Link to="email_lists"&gt;&lt;i className="fa fa-envelope-o"&gt;&lt;/i&gt; &lt;span&gt;Email Lists&lt;/span&gt;&lt;/Link&gt;&lt;/li&gt;
    &lt;li&gt;&lt;Link to="billing"&gt;&lt;i className="fa fa-credit-card"&gt;&lt;/i&gt; &lt;span&gt;Buy Verifications&lt;/span&gt;&lt;/Link&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to set the class for the active path to <code>active</code> on the wrapping element <code>&lt;li&gt;</code>. I see there are other solutions out there that show how to do this like <a href="https://stackoverflow.com/questions/34410051/conditionally-set-active-class-on-menu-using-react-router-current-route">Conditionally set active class on menu using react router current route</a>, however I don't think that it's the best way to set an active class on a wrapper to a <code>Link</code>.</p>
  
  <p>I also found <a href="https://github.com/insin/react-router-active-component" rel="noreferrer">https://github.com/insin/react-router-active-component</a> but it feels like it is unnecessary.</p>
  
  <p>In React Router, is this possible or do I need to use an external solution?</p>