title: react router routing with parameter id
body: <p>I have a problem with passing parameters inside the route.
  Currently, I have these routes:</p>
  <pre><code>&lt;Route component={CategoriesPage} path={`/${AllRoutesEnum.COURSES}`} exact/&gt;
  &lt;Route component={CoursesPage} path={`/${AllRoutesEnum.COURSES}/:id`} exact/&gt;
  &lt;Route component={SectionPage} path={`/${AllRoutesEnum.COURSES}/:id/:id`} exact/&gt;
  </code></pre>
  <p>So SectionPage route will look like this: courses/k-8-grades/early-math</p>
  <p><strong>What I want to do</strong>:</p>
  <ul>
  <li>When the section page reached add a new id parameter. Video lesson id.
  So it should be: courses/k-8-grades/early-math/videoId</li>
  <li>When clicking button overview. Add url #overview. So it should be courses/k-8-grades/early-math/videoId#overview.</li>
  <li>When clicking button search. Remove url #overview add #search. So it would be courses/k-8-grades/early-math/videoId#search</li>
  </ul>
  <p><strong>So what I tried:</strong></p>
  <ul>
  <li>Using redirects. When reached SectionPage somehow pass id to redirect. But it failed because routes didn't match properly.</li>
  </ul>
  <pre><code>&lt;Redirect from={`/${AllRoutesEnum.COURSES}/:id/:id/`} to={`/${AllRoutesEnum.COURSES}/:id/:id/test`} /&gt;
   {/* courses/early-math/early-math/test */}
  &lt;Route component={SectionPage} path={`/${AllRoutesEnum.COURSES}/:id/:id/`} exact/&gt;
  {/* courses/k-8-grades/early-math */}
  </code></pre>
  <ul>
  <li>In Section Page add lesson id onInit. But if I manually add it</li>
  </ul>
  <pre><code>import { useHistory } from &quot;react-router-dom&quot;;
  const history = useHistory();
  history.push('fdfdf');
  </code></pre>
  <p>When it would become <strong>courses/k-8-grades/fdfdf</strong> instead of <strong>courses/k-8-grades/early-math/fdfdf</strong></p>
  <p><strong>Update</strong>
  So what I came up with doing is creating a SectionRedirect page:</p>
  <pre><code>&lt;Route component={CategoriesPage} path={`/${AllRoutesEnum.COURSES}`} exact /&gt;
  &lt;Route component={CoursesPage} path={`/${AllRoutesEnum.COURSES}/:a`} exact /&gt;
  &lt;Route component={SectionRedirectPage} path={`/${AllRoutesEnum.COURSES}/:a/:b/`} exact /&gt;
  &lt;Route component={SectionPage} path={`/${AllRoutesEnum.COURSES}/:a/:b/:id`} exact /&gt;
  </code></pre>
  <p>Section redirect page pushes videoID. Because I need to pathname before fetching correct video id courses/k-8-grades/early-math.</p>
  <pre><code>props.history.push(`${location.pathname}/${videoId}`);
  </code></pre>
  <p>In section page, I used like suggested and it worked wonders.</p>
  <pre><code>props.history.push({ hash: &quot;overview&quot; })
  </code></pre>
  <p>Unfortunately, it didn't fully solve my problem:
  Expected behavior:
  Currently when visiting section Page my url is this:</p>
  <pre><code>courses/k-8-grades/early-math/videoId1#overview
  </code></pre>
  <p>Clicking on second video link should change url to this:</p>
  <pre><code>courses/k-8-grades/early-math/videoId2#overview
  </code></pre>
  <p>Real life example would be udemy video player.</p>
  <p>Found solution using:
  In section.page</p>
  <pre><code>history.push({
        pathname: '/courses/k-8-grades/early-math/videoId'
      })
  </code></pre>