<Route path="/exercises" element={<Layout />}>
<Route index element={<List />} />
<Route path=":id" element={<Exercise />} />
</Route>
How would I rewrite this as JS objects for useRoutes() including the index route?
{
path: "/exercises",
element: <Layout />,
children : [
{index? , element: <List />},
{path: ":id", element: <Exercise /> }
]
}
I'm not sure what to do with index...
The useRoutes hook takes an array of RouteObject objects
/** * A route object represents a logical route, with (optionally) its child * routes organized in a tree-like structure. */ export interface RouteObject { caseSensitive?: boolean; children?: RouteObject[]; element?: React.ReactNode; index?: boolean; path?: string; }
You should be able to specify what is an index route using the index property.
{
path: "/exercises",
element: <Layout />,
children: [
{ index: true, element: <List /> },
{ path: ":id", element: <Exercise /> }
],
}
This seems to work:
{
path: "/exercises",
element: <Layout />,
children : [
{path: "" , element: <List />},
{path: ":id", element: <Exercise /> }
]
}
When the path is /exercises Layout is Rendered and List is rendered in the Outlet in Layout. when the path is /exercises/4 (for example) the Exercise component is rendered in Outlet in Layout.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With