title: React Router is not acknowledging change to link pathname
body: <p>I have a react application and need to link to a component called, &quot;CourseSelectionContainer&quot;, and pass a “lessonId” parameter.  The Link is setup in the &quot;CoursesSetupMenu&quot; component and I am using the Link format below.</p>
  <pre><code> &lt;Link to = {
      { pathname: `${activity.gradeLevelURL}` + &quot;/GradeLevel&quot;,
        state: {lessonId: activity.lessonId}
      }
  }&gt;
  </code></pre>
  <p>The router code is in &quot;CoursesSetupRouter&quot; component and looks as follows:</p>
  <pre><code>  return (
      &lt;&gt;
        &lt;Switch&gt;
          &lt;PrivateRoute path=&quot;/learners/publicCourses/Vocabulary/GradeLevel&quot;
            component={() =&gt; (&lt;CourseSelectionContainer /&gt;)}/&gt;
          &lt;PrivateRoute
            path=&quot;/learners/publicCourses/History/GradeLevel&quot;
            render={(props) =&gt; &lt;CourseSelectionContainer {...props} /&gt;} /&gt;
        &lt;/Switch&gt;
      &lt;/&gt;
    );
  </code></pre>
  <p>Note that, based on some other Stackoverflow problems, I have tried both the formats shown above to route to the component.  The container that renders the Menu and router includes the code as follows:</p>
  <pre><code>        &lt;/div&gt;
          { (lessonMenuItems != undefined &amp;&amp;
            lessonMenuItems != null &amp;&amp;
            lessonMenuItems.length &gt; 0) &amp;&amp;
          &lt;CoursesSetupMenu
             coursesMenuItems = {lessonMenuItems}
             coursesURL={url}
         /&gt;}
        &lt;/Drawer&gt; 
        &lt;Container maxWidth=&quot;lg&quot; className={classes.container}&gt;
            &lt;Grid container spacing={1}&gt;
            &lt;CoursesSetupRouter/&gt;
            &lt;/Grid&gt;
          &lt;/Container&gt;
      &lt;/div&gt;
  </code></pre>
  <p>For some reason the path is being maintained as the path prior to entering the menu.  I used the console logs below to print out the values to see what has changed and what has not.</p>
  <pre><code>  let location = useLocation();
    console.log (&quot;GradeLevelSetupMenu - Start - location = &quot;, location)
  
    let { path, url } = useRouteMatch();
    console.log (&quot;GradeLevelSetupMenu - path = &quot;, path);
    console.log (&quot;GradeLevelSetupMenu - url = &quot;, url);
  </code></pre>
  <p>What this is showing is that, based on the location, the pathname = &quot;/learners/publicCourses/Vocabulary/GradeLevel&quot;, which is expected.</p>
  <p>Unfortunately the path and URL are still indicating, path = “/learners/publicCourses/Vocabulary”.  The URL points to the same location.  This is where the application gets routed to.</p>
  <p>I would have expected, based on selection of the link, that both the path and URL would have changed to, /learners/publicCourses/Vocabulary/GradeLevel and routed to the accompanying component.  That did not happen.</p>
  <p>Do I need to do something else to force the routing to occur as expected, to /learners/publicCourses/Vocabulary/GradeLevel ?  Is there something else wrong with my logic or syntax?</p>