How to create admin route using react router v 6

Question

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.

Answer 1

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>