react router routing with parameter id

I have a problem with passing parameters inside the route. Currently, I have these routes:

<Route component={CategoriesPage} path={`/${AllRoutesEnum.COURSES}`} exact/>
<Route component={CoursesPage} path={`/${AllRoutesEnum.COURSES}/:id`} exact/>
<Route component={SectionPage} path={`/${AllRoutesEnum.COURSES}/:id/:id`} exact/>

So SectionPage route will look like this: courses/k-8-grades/early-math

What I want to do:

  • When the section page reached add a new id parameter. Video lesson id. So it should be: courses/k-8-grades/early-math/videoId
  • When clicking button overview. Add url #overview. So it should be courses/k-8-grades/early-math/videoId#overview.
  • When clicking button search. Remove url #overview add #search. So it would be courses/k-8-grades/early-math/videoId#search

So what I tried:

  • Using redirects. When reached SectionPage somehow pass id to redirect. But it failed because routes didn't match properly.
<Redirect from={`/${AllRoutesEnum.COURSES}/:id/:id/`} to={`/${AllRoutesEnum.COURSES}/:id/:id/test`} />
 {/* courses/early-math/early-math/test */}
<Route component={SectionPage} path={`/${AllRoutesEnum.COURSES}/:id/:id/`} exact/>
{/* courses/k-8-grades/early-math */}
  • In Section Page add lesson id onInit. But if I manually add it
import { useHistory } from "react-router-dom";
const history = useHistory();

When it would become courses/k-8-grades/fdfdf instead of courses/k-8-grades/early-math/fdfdf