<Route path='/profile' element={<PrivateRoute/>}>
<Route path='/profile' element={<Home/>}/> // inner/nested route
</Route>
// Your PrivateRoute Component should look like this
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import { auth } from '*somewhere*';
const PrivateRoute = () => {
const { userLoggedIn } = auth();
if (userLoggedIn) {
return <Outlet />; // i.e continue to the inner/nested route
} else {
return <Navigate to="/login" />;
}
// same thing as
// 'return userLoggedIn ? <Outlet /> : <Navigate to="/login" />;'
}