title: NavLink active on same link for multiple URLs in React Router DOM
body: <p>I have a page with multiple tabs (child). I also change the URL for each tab, but I'm still on the parent page, just changing the URL for the tab.</p>
  
  <p>the problem is that I can't keep the parent page NavLink active when I click on the tab 'cause it changes the URL, but I want to keep that Active on the Tabs URL.</p>
  
  <p>How to do this?</p>
  
  <p>import React        from 'react';
  import { NavLink }  from 'react-router-dom';</p>
  
  <pre><code>export default () =&gt; {
  
  
      return (
          &lt;&gt;
          &lt;nav className='Navigation'&gt;
              &lt;ul className={`Navigation__list ${hide}`}&gt;
                  &lt;li className='Navigation__list-item'&gt; 
                     &lt;NavLink to="/events" &gt;Events&lt;/NavLink&gt; 
                  &lt;/li&gt;                
              &lt;/ul&gt;
          &lt;/nav&gt;
  
  
          &lt;Tabs /&gt;
         &lt;/&gt;
  
      );
  }
  </code></pre>
  
  <p>// Tabs Component As Child</p>
  
  <pre><code>    export default function Tabs () =&gt; (
                  &lt;ul className="events__tab"&gt;
                      &lt;li&gt; &lt;NavLink to="/events"&gt; All Events &lt;/NavLink&gt; &lt;/li&gt;
                      &lt;li&gt; &lt;NavLink to="/myevents"&gt; My Events &lt;/NavLink&gt; &lt;/li&gt;   
                  &lt;/ul&gt;
  )
  </code></pre>
  
  <p>Thanks for your Support in Advance!</p>