DEV Community

Discussion on: 🔐 Private Route in React Router v6

View post
Collapse
 
aspyryan profile image
Aspyryan •

I was using a module to route users to I only need to render the header once etc.. so in I have outlet to render the nested routes. How can I now use the with the nested routes. This was my homeModule

return (<>
<Header selectedPage={0} />
<main className="w-main flex-1 shadow-md m-auto p-5 my-5 rounded-sm flex">
  <Outlet/>
</main>
</>);
Enter fullscreen mode Exit fullscreen mode

And this is how I would want to have it work:

<Route path="/" element={<PrivateOutlet />}>
  <Route exact path="/requests" element={<RequestsPage />} />
  ...
</Route>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
aspyryan profile image
Aspyryan •

Whoops, I already figured it out, this was the code for my privateoutlet:

export default function PrivateOutlet() {
    const { account } = useContext(AccountContext);

    return account ? (
        <HomeModule>
            <Outlet />
        </HomeModule>
    ) : (
        <Navigate to="/login" replace />
    );
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
tonnov profile image
Antonio Nogueda • • Edited

is it necesary write Outlet twice?

Collapse
 
paramount3545 profile image
All In Developer •

Yes 😊 I was about to write that you need to change PrivateOutlet