Hook version of <Routes> that uses objects instead of
components. These objects have the same properties as the component props.
The return value of useRoutes is either a valid React element you can use
to render the route tree, or null if nothing matched.
import { useRoutes } from "react-router";
function App() {
  let element = useRoutes([
    {
      path: "/",
      element: <Dashboard />,
      children: [
        {
          path: "messages",
          element: <DashboardMessages />,
        },
        { path: "tasks", element: <DashboardTasks /> },
      ],
    },
    { path: "team", element: <AboutPage /> },
  ]);
  return element;
}
function useRoutes(
  routes: RouteObject[],
  locationArg?: Partial<Location> | string,
): React.ReactElement | null
An array of RouteObjects that define the route hierarchy
An optional Location object or pathname string to use instead of the current Location
A React element to render the matched route, or null if no routes matched