App.js

import React from "react"
import { Link, useRoutes, Outlet } from "react-router-dom"

function App() {
  const el = useRoutes([
    { path: "/", element: <div>index</div> },
    {
      path: ":courseId",
      element: (
        <div>
          Course ID
          <hr />
          <Outlet />
        </div>
      ),
      // if you uncomment the children, then suddenly this match has
      // a bigger priority than the static "/home"
      // children: [
      //   { path: '/', element: <div>Course Index</div> },
      //   { path: ':chapter', element: <div>Chapter</div> }
      // ]
    },
    {
      path: "home",
      element: <div>Home</div>
    }
  ])

  return (
    <div>
      <Link to="/">Index</Link> <Link to="/home">Home</Link>{" "}
        <Link to="/c/some-course">Some Course</Link>
      <hr />
      {el}
    </div>
  )
}

export default App