title: React router goes to proper URL but does not update the view
body: <p>I'm using React Router in my React app for tracking recipes. The component here is generating links for each recipe card that will then show the detail page for the recipe selected. When I click on the link in the cards, I am taken to the correct URL, but the view does not show what is in the component , instead it just shows the Home screen component from the base URL. What do I need to change to make the URLs <code>recipe/{id}</code> actually show the  component?</p>
  <pre><code>export default function RecipeReviewCard(props) {
    const classes = useStyles();
    return (
      // TODO: Make this link to the actual recipe detail screen.
      &lt;div&gt;
        &lt;Link to={'recipe/' + props.recipe.id}&gt;
          &lt;Card className={classes.root}&gt;
            &lt;CardHeader
              title={props.recipe.title}
              subheader={props.recipe.prepTime}
            /&gt;
            &lt;CardMedia
              className={classes.media}
              image={props.recipe.imageURL}
              title={props.recipe.title}
            /&gt;
            &lt;CardContent&gt;
              &lt;Typography variant='body2' color='textSecondary' component='p'&gt;
                {props.recipe.description}
              &lt;/Typography&gt;
            &lt;/CardContent&gt;
          &lt;/Card&gt;
        &lt;/Link&gt;
        &lt;Switch&gt;
          &lt;Route exact path={'recipe/' + props.recipe.id}&gt;
            &lt;RecipeDetail /&gt;
          &lt;/Route&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    );
  </code></pre>
  <p>This second component is the parent class which is also using router to define some paths for the main navbar in the app. Perhaps there is a problem with the priority of my routes, it is taking the default '/' route for some reason over the others.</p>
  <pre><code>export default function PermanentDrawerLeft() {
    const classes = useStyles();
  
    // TODO: Fix font/style on the nav bar buttons.
    return (
      &lt;div className={classes.root}&gt;
        &lt;AppBar position='fixed' className={classes.appBar}&gt;
          &lt;Toolbar&gt;
            &lt;Typography variant='h6' noWrap&gt;
              &lt;Switch&gt;
                &lt;Route path='/'&gt;Kitchen Assistant&lt;/Route&gt;
                &lt;Route path='/cookbooks'&gt;Cookbooks&lt;/Route&gt;
                &lt;Route path='/search'&gt;Search&lt;/Route&gt;
                &lt;Route path='/settings'&gt;Settings&lt;/Route&gt;
              &lt;/Switch&gt;
            &lt;/Typography&gt;
          &lt;/Toolbar&gt;
        &lt;/AppBar&gt;
        &lt;Drawer
          className={classes.drawer}
          variant='permanent'
          classes={{
            paper: classes.drawerPaper,
          }}
          anchor='left'
        &gt;
          &lt;div className={classes.toolbar} /&gt;
          &lt;Divider /&gt;
          &lt;Link to='/cookbooks'&gt;
            &lt;ListItem button key={'Cookbooks'}&gt;
              &lt;ListItemIcon&gt;
                &lt;MenuBookIcon /&gt;
              &lt;/ListItemIcon&gt;
              &lt;ListItemText primary={'Cookbooks'} /&gt;
            &lt;/ListItem&gt;
          &lt;/Link&gt;
          &lt;Link to='/search'&gt;
            &lt;ListItem button key={'Search'}&gt;
              &lt;ListItemIcon&gt;
                &lt;SearchIcon /&gt;
              &lt;/ListItemIcon&gt;
              &lt;ListItemText primary={'Search'} /&gt;
            &lt;/ListItem&gt;
          &lt;/Link&gt;
          &lt;Divider /&gt;
          &lt;Link to='/settings'&gt;
            &lt;ListItem button key={'Settings'}&gt;
              &lt;ListItemIcon&gt;
                &lt;SettingsIcon /&gt;
              &lt;/ListItemIcon&gt;
              &lt;ListItemText primary={'Settings'} /&gt;
            &lt;/ListItem&gt;
          &lt;/Link&gt;
        &lt;/Drawer&gt;
        &lt;main className={classes.content}&gt;
          &lt;div className={classes.toolbar} /&gt;
          &lt;Switch&gt;
            &lt;Route path='/cookbooks'&gt;
              &lt;Cookbooks /&gt;
            &lt;/Route&gt;
            &lt;Route path='/search'&gt;
              &lt;Search /&gt;
            &lt;/Route&gt;
            &lt;Route path='/settings'&gt;
              &lt;Settings /&gt;
            &lt;/Route&gt;
            &lt;Route path='/'&gt;
              &lt;Home /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/main&gt;
      &lt;/div&gt;
  </code></pre>