Using Multiple Routers with React Router v6

When building large-scale web applications, one common pattern is to split different parts of the app (e.g., public-facing pages, dashboards, admin areas) into their modules or sections. With React Router v6, you can use multiple routers and lazy-load routes to enhance both modularity and performance.

The RouteConfig Type

export type RouteConfig = {
  path: string;
  exact?: boolean;
  title?: string;
  component: ComponentType;
  protected?: boolean;
  userRole: UserRole;
};

Setting Up Lazy-Loaded Routes

import { lazy } from 'react';
import { RouteConfig } from 'types';

const NotFound = lazy(() => import('../pages/NotFound'));
const HomePage = lazy(() => import('../pages/Home'));
const SignUp = lazy(() => import('../pages/SignUp'));
const Dashboard = lazy(() => import('../pages/Dashboard'));

export const publicRoutes: RouteConfig[] = [
  { path: '/', exact: true, component: HomePage },
  { path: '/signup', exact: true, component: SignUp },
  { path: '*', component: NotFound },
];

export const protectedRoutes: RouteConfig[] = [
  { path: '/dashboard', exact: true, component: Dashboard, protected: true, userRole: 'user' },
];

Conclusion

Multiple routers with React Router v6 give you the flexibility to build complex, multi-section applications while keeping your codebase organized and performant.