How to Build a Multi-Role Routing System in React

.
├── App.css
├── App.tsx
├── assets
│   └── react.svg
├── components
│   └── profile-switch.tsx       # Component to handle profile switching
├── context
│   └── index.tsx                # Contains AuthContext for handling user state
├── index.css
├── main.tsx
├── pages                        # Pages corresponding to different roles
│   ├── admin.tsx                # Admin home page
│   ├── authenticated.tsx        # Authenticated user home page
│   ├── guest-home.tsx           # Guest home page
│   └── owner.tsx                # Owner home page
├── ROLE.ts                      # Defines role constants
├── routes
│   └── index.tsx                # Main routing logic based on role
└── vite-env.d.ts

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  Routes,
} from "react-router-dom";
import { useContext } from "react";
import { AuthContext } from "../context";
import { GuestHome } from "../pages/guest-home";
import { AuthenticatedHome } from "../pages/authenticated";
import { OwnerHome } from "../pages/owner";
import { AdminHome } from "../pages/admin";
import { role } from "../ROLE";

const guestRoutes = (
  <Route>
    <Route path="/" element={<GuestHome />} />
  </Route>
);

const authenticatedRoutes = (
  <Route>
    <Route path="/" element={<AuthenticatedHome />} />
  </Route>
);

const ownerRoutes = (
  <Route>
    <Route path="/" element={<OwnerHome />} />
  </Route>
);

const adminRoutes = (
  <Route>
    <Route path="/" element={<AdminHome />} />
  </Route>
);

const RootRoutes = () => {
  const { auth } = useContext(AuthContext);

  if (auth.profileMode === role.authenticated) {
    return <Routes>{authenticatedRoutes}</Routes>;
  }
  if (auth.profileMode === role.owner) {
    return <Routes>{ownerRoutes}</Routes>;
  }

  if (auth.profileMode === role.admin) {
    return <Routes>{adminRoutes}</Routes>;
  }

  return <Routes>{guestRoutes}</Routes>;
};

const router: ReturnType<typeof createBrowserRouter> = createBrowserRouter(
  createRoutesFromElements(<Route path="/*" element={<RootRoutes />} />)
);

export default router;

export const role = {
  guest: "guest",
  authenticated: "authenticated",
  owner: "owner",
  admin: "admin",
};

   npm install

   npm run dev