How to implement infinitely nested routing templates

[see7788]

import {
useNavigate as usereactNavigate,
useLocation as usereactLocation,
useOutlet,
useRoutes,
RouteObject,
createHashRouter,
useResolvedPath
} from 'react-router-dom'
import { Drawer as AntdDrawer } from "antd"

const Component: FC = () => {
const { pathname } = useResolvedPath("/")
return <>{pathname}</>
}
const myr: Array<RouteObject & { Component: FC }> = [
{ path: "a", Component },
{ path: "a1", Component },
{ path: "a2", Component },
{ path: "a3", Component },
{ path: "a4", Component },
{ path: "a5", Component },
{ path: "a6", Component },
{ path: "a7", Component },
]
//How to implement infinitely nested routing templates?
// http://any.com/a1/a1/a2/a2/a3 more....
export const App: FC = () => {
const rs = useRoutes(myr.map(v => ({
...v, Component() {
const nav = use1Navigate()
const routerchildren = useOutlet();
return (
<>
<AntdDrawer
open={!!routerchildren}
onClose={() => nav(-1)}
push={{ distance: 100 }}
>
{routerchildren}

<v.Component />
</>
)
}
})))
return (
<>
index
{rs}
</>
);
}

[sergiodxa]

You can use a splat (aka catch-all) route for that