Error: [PrivateRoute] is not a component. All component children of must be a or
Error: [PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
If you want to handle the above use case, We have some solutions with examples:
Solution 1 :
function RequireAuth({ children }) {
let auth = useAuth();
let location = useLocation();
if (!auth.user) {
return <Navigate to=”/login” state={{ from: location }} />;
}
return children;
}
// in app.js
<Route
path=”/protected”
element={
<RequireAuth>
<ProtectedPage />
</RequireAuth>
}
/>
Solution 2:
import {Navigate} from “react-router-dom”;
import {isauth} from ‘auth’
<Route exact path=”/home” element={<Home/>}/>
<Route exact path=”/” element={isauth ? <Dashboard/> : <Navigate to=”/Home” />}/>
Source: https://stackoverflow.com/questions/69864165/error-privateroute-is-not-a-route-component-all-component-children-of-rou
