Error: [PrivateRoute] is not a component. All component children of must be a or

Spread the love

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

 

admin

admin

Leave a Reply

Your email address will not be published.