I am trying to make a private route and I get the following error: caught Error: [PrivateRoute] is not a component. All component children of must be a or <React.Fragment>
The first two code blocks are two DIFFERENT attempts at trying to solve the problem with the PrivateRoute. None of which worked. I found some other solutions to the problem here on SO, but they are outdated. Any suggestions?
const PrivateRoute = ({ children, ...rest }) => {
const { currentUser } = useContext(AuthContext);
return currentUser ? children : <Navigate to="/login" />;
};
const PrivateRoute = ({ children, ...rest }) => {
const { currentUser } = useContext(AuthContext);
// return currentUser ? children : <Navigate to="/login" />;
return (
<Route
{...rest}
render={({ location }) =>
currentUser ? (
children
) : (
<Navigate
to={{
pathname: "/login",
state: { from: location },
}}
/>
)
}
/>
);
};
<Routes>
<PrivateRoute>
<Route
path="form"
element={
<Form
deletePdfFromPreview={deletePdfFromPreview}
handleFile={handleFile}
createBookletDb={createBookletDb}
/>
}
/>
<Route index element={<Navigate to="booklets" replace />} />
<Route
exact
path="booklets"
element={
<Booklets
allPdfFiles={allPdfFiles}
booklets={booklets}
currentPdfFiles={currentPdfFiles}
editBooklet={editBooklet}
deleteBooklet={deleteBooklet}
/>
}
/>
</PrivateRoute>
<Route
path="/login"
element={
<Login
passwordError={passwordError}
register={register}
logout={logout}
login={login}
/>
}
/>
<Route
path="/register"
element={
<Register passwordError={passwordError} register={register} />
}
></Route>
<Route path="/about" element={<About />}></Route>
<Route path="/booklet/:id" element={<Booklet />}></Route>
</Routes>