title: Set active link in React Router based on current path
body: <p>Using React Router and Material UI, I'm trying to set the navigation item selected state based on the current URL path. If a user comes to a specific page, it should set the selected state of the appropriate link in the sidebar.</p>
  <p>This is the current setup, but not sure what property I'm missing to set the active state based on the URL path using React Router</p>
  <h4>data.navigation</h4>
  <pre><code>&quot;navigation&quot;:[
          {
              &quot;label&quot;:&quot;Introduction&quot;,
              &quot;path&quot;: &quot;/&quot;  
          },
          {
              &quot;label&quot;:&quot;Page Two&quot;,
              &quot;path&quot;: &quot;pagetwo&quot;
          }
  ]
  </code></pre>
  <pre><code>import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';
  
  const [selectedIndex, setSelectedIndex] = useState(0);
  
  const handleListItemClick = (event, index) =&gt; {
     setSelectedIndex(index);
  };
  
  {data &amp;&amp; data.navigation.map((item, i) =&gt;
        &lt;Link key={i} to={`${item.path}`} className={classes.link}&gt; 
          &lt;ListItem button selected={selectedIndex === i} onClick={(event) =&gt; handleListItemClick(event, i)}&gt;
            &lt;ListItemText className={classes.navLink}&gt;{item.label}&lt;/ListItemText&gt;
          &lt;/ListItem&gt;
        &lt;/Link&gt;
   )}
  </code></pre>