Protected nested routes

I am using Redirects for my Authenticated routes and Im trying to implement this to show nested routes within a protected route.

I have a sub menu after my users login so id like this to have a sensible hierarchy.

When i add this route to my Routes.js file it displays normally with the correct URL but this component takes over the page and removes the sub menu.

<AuthenticatedRoute path="/dashboard" component={Dashboard} props={childProps} />
<AuthenticatedRoute path="/dashboard/settings" component={Settings} props={childProps} />

I also tried using render props on my Route component in my parent component but I get my 404 component.

I’ve done this before but not with authentication. If someone could please point me in the right direction this would be great!

Hi there, I’m not totally clear what the issue here is. The routes are meant for the component to take over the rendering. So any sub menu needs to placed at a level above that component.

Thank you @jayair. I realized this the next morning. long day at the office

1 Like