I have multiple nested routes in, however the index route component that is 2 levels deep is not rendering and just showing a blank page.
// I cannot add an `index` property because you can't have child routes if it is an index route.
export const routes= [
{
// Put a navigate element since index routes cannot have children.
// If this navigate is removed, it cannot reroute using index.
element: () => <Navigate to={`one`} />,
path: '/',
name: 'default',
children: [
{
// Once it is navigated to here from the default `/` route, it just renders a blank page and not the component `NestedComponentOne`
element: NestedComponentOne,
path: 'one',
name: 'One',
children: [
{
element: DeeplyNestedComponentOne,
name: 'Deep One',
path: 'deep-one',
},
{
element: DeeplyNestedComponentTwo,
name: 'Deep Two',
path: 'deep-two',
},
]
},
]
}
]
const MyComponent= () => {
return (
<>
<div style={{ margin: "0px 0px" }}>
<Routes>
{routes.map((route, idx) => {
if (route.children && route.children.length > 0) {
return (
<Route
key={`child-routes-auth-${idx}`}
element={route?.element && <route.element />}
errorElement={route?.errorElement}
name={route.name}
path={route.path}
>
{route.children.map((childRoute, childIdx) => {
if (childRoute.children && childRoute.children.length > 0) {
return (
<Route
key={`inner-child-auth-routes-${childIdx}`}
element={childRoute?.element && <childRoute.element />}
errorElement={childRoute?.errorElement}
name={childRoute.name}
path={childRoute.path}
>
{childRoute.children.map((innerRoutes, innerIndex) => {
return (
innerRoutes.element && (
<Route
key={`nested-inner-auth-${innerIndex}`}
element={innerRoutes?.element && <innerRoutes.element />}
errorElement={innerRoutes?.errorElement}
index={innerRoutes?.index}
name={innerRoutes.name}
path={innerRoutes.path}
/>
)
)
})}
</Route>
)
}
return (
childRoute.element && (
<Route
key={`childIdx-auth-${childIdx}`}
element={childRoute?.element && <childRoute.element />}
errorElement={childRoute?.errorElement}
index={childRoute?.index}
name={childRoute.name}
path={childRoute.path}
/>
)
)
})}
</Route>
)
}
return (
route.element && (
<Route
key={`top-routes-${idx}`}
element={<route.element />}
errorElement={route?.errorElement}
index={route?.index}
path={route.path}
name={route.name}
/>
)
)
})}
</Routes>
</div>
</>
);
}
