I am working on a project, using this boilerplate https://github.com/ankushjain2001/fastapi-react-mongodb and updated the dependencies for the frontend to new major versions.
I already fixed some errors, but cant get custom routes refactored properly..
This is how it is used in the App.js
<ProtectedRoute path="/admin" exact strict component={Home} />
And this is the Component itself
export const ProtectedRoute = ({component: Component, ...rest}) => {
return (
<Route
{...rest}
render={props => {
// Goto the concerned route when authenticated
if (auth.isAuthenticated()){
return <Component {...props}/>
}
// Goto the default login page when not authenticated
else {
return (
<div>
<Landing {...props}/>
</div>
)
}
}}
/>
);
};
The error I am getting is:
Uncaught Error: [ProtectedRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
How can i fix this? Thanks in advance 🙂