35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { Suspense, type ReactNode } from 'react';
|
|
import { createBrowserRouter, type RouteObject } from 'react-router-dom';
|
|
import { appRoutes, type RouteConfig } from './config';
|
|
|
|
/**
|
|
* A recursive function to map our custom route config to the format
|
|
* that react-router-dom expects, applying layouts and guards.
|
|
*/
|
|
function mapRoutes(routes: RouteConfig[]): RouteObject[] {
|
|
return routes.map((route) => {
|
|
// Start with the base element, wrapped in Suspense for lazy loading
|
|
let element: ReactNode = (
|
|
<Suspense fallback={<div>Loading...</div>}>{route.element}</Suspense>
|
|
);
|
|
|
|
// Conditionally wrap the element in the specified layout
|
|
// if (route.layout) {
|
|
// element = <route.layout>{element}</route.layout>;
|
|
// }
|
|
|
|
// Conditionally wrap the element in the authentication guard
|
|
// if (route.authRequired) {
|
|
// element = <ProtectedRoute>{element}</ProtectedRoute>;
|
|
// }
|
|
|
|
return {
|
|
path: route.path,
|
|
element: element,
|
|
...(route.children && { children: mapRoutes(route.children) }),
|
|
};
|
|
});
|
|
}
|
|
|
|
export const router = createBrowserRouter(mapRoutes(appRoutes));
|