react-router-dom useParams() returns undefined when defining nested routes

Question

"react-router-dom": "^6.3.0",
"react-router-redux": "^4.0.8",

I have a help page that directs users to /help , when users click on some links, it directs them to paths like /help/calendar, but directed paths can also have children paths so pathname can be infinitely nested like /help/markdown/calendar/table/modifications etc.

Our project uses a routes object defined as in:

{
  ...
  { path: "/help", component: <HelpScreen /> }, 
  { path: "/help/...path", component: <HelpScreen /> }
}

then in ContentContainer, it's wrapped with

  const renderRoutes = () => {
    const allRoutes = getAllRoutes();
    if (routes.length > 0) {
      const routeElems = allRoutes.map((r, i) => <Route key={r.path} path={r.path} element={r.component} />);
      routeElems.push(<Route key={allRoutes.length} element={<PageNotFound />} />);

      return routeElems;
    } else {
      return <></>;
    }
  };

   ...

  <Routes>{renderRoutes()}</Routes>

essentially this is all wrapped in index.tsx via <BrowserRouter> I know it looks complicated, this is our team's structure.

using catch-all parameter in the path prop of the Route component. when I'm trying to access to pathname via

const { path } = useParams();
console.log(path)
//useParams returns empty object, path returns undefined

Answer 1

Setting up dynamic recursive paths as in

 { path: "/help/*", component: <HelpScreen /> }

would cause an error. Realized, path-to-regexp function that I used no longer supports asterisks character. using "/help/:splat*" worked.