Hello i'm new to react development and recently react router has been updated to v 6 and that caused a lot of problem when i try to create an admin route. for example in v5 i used .
<AdminRoute exact path={${path}/makeAdmin}>
but it does not work in v6. please help me.
How to create admin route using react router v 6
Viewed 250
1 Answers
The Route component API and general routing changed significantly from version 5 to 6. Gone are custom route components, replaced by wrapper components that handle the business logic and return either the children prop or an Outlet (for nested Route components), or a redirect (in the form of a Navigate with replace prop).
Example v5 custom Route:
const AdminRoute = props => {
const isAdmin = /* admin business logic */;
return isAdmin ? <Route {...props} /> : <Redirect to="/" />;
};
...
<AdminRoute exact path={`${path}/makeAdmin`}>
<ProtectedAdminComponent />
</AdminRoute>
Example conversion to v6 using wrapper component:
import { Navigate, Outlet } from 'react-router-dom';
const AdminWrapper =() => {
const isAdmin = /* admin business logic */;
return isAdmin ? <Outlet /> : <Navigate to="/" replace />;
};
...
<Route element={<AdminWrapper />}>
<Route path={`${path}/makeAdmin`} element={<ProtectedAdminComponent />} />
</Route>
Related