For learning purposes I am trying to create a custom Route, which is protected, using React-Router v6. As many people have tried before me in Forums or here, I get this error: Error: [ProtectedRoute] is not a component.
Also if someone is struggling with a non-reusable implementation can see my working code below: My problem is that I would really like it to be reusable so that I can avoid having this messy kind of code. Let me know if you have any ideas.
I personally think that it's kinda impossible because of the current V6 implementation. Maybe they will let us do it in the future. But I hope that this post will help anyway people who would like to have protected routes especially while using the Parse Platform.
Custom Route:
const ProtectedRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render={(props) => {
<AuthWrapper>
<Component {...rest} {...props} />
</AuthWrapper>;
}}
/>
);
};
Wrapper using Parse Server to protect the routes if the user isn't currently logged in.
const AuthWrapper = ({ children }) => {
if (Parse.User.current() !== null) {
let isAuthenticated = Parse.User.current().getSessionToken();
let authCondition = isAuthenticated !== undefined;
if (authCondition) {
return children;
}
}
return <Navigate to={"/login"} />;
};
export default AuthWrapper;
Working solution without custom Route: (ofc without <ProtectedRoute />)
<Route
path="/book"
element={
<AuthWrapper>
<BookPage />
</AuthWrapper>
}
/>
What I would like to do instead:
<ProtectedRoute
path={'/path'}
element={<Anything/>}
/>
