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 * as React from "react";
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;
}
useRoutes(routes: RouteObject[], locationArg?: Partial<Location> | string): React.ReactElement | null
An array of route objects that define the route hierarchy
An optional location object or pathname string to use instead of the current location