title: How to set a NavLink as active using react-router-dom
body: <p>I am using react-router-dom, and I need to make red a link when the url match, in my up I have two urls <code>/</code> => home and <code>/map</code>.</p>
  
  <p>With the current code, I am able to route to different page but the <code>NavLink</code> is not being highlighted when the url is changed in the browser. Any ideas how to fix it. </p>
  
  <pre><code>import React from 'react'
  import { NavLink, Route } from 'react-router-dom'
  
  const Navigation = ({ onClick, id, title, tooltip, url }) =&gt; {
    return (
      &lt;div onClick={onClick} alt={tooltip}&gt;
        { &lt;Route path={url} exact children={({ match }) =&gt; (
  
          &lt;div style={match ? {color: 'red'} : {}}&gt;
            {match ? '&gt; ' : ''}&lt;NavLink to={url}&gt;{title}&lt;/NavLink&gt;
          &lt;/div&gt;
    )} /&gt;}
      &lt;/div &gt;
    )
  }
  
  export default Navigation
  
  const Root = ({ store }) =&gt; (
        &lt;Provider store={store}&gt;
          &lt;Router&gt;
            &lt;Switch&gt;
              &lt;Route exact path='/' component={Forecast} /&gt;
              &lt;Route exact path='/map' component={Map} /&gt;
            &lt;/Switch&gt;
          &lt;/Router&gt;
        &lt;/Provider&gt;
      )
  </code></pre>