Vite File-based Routing

main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import router from './router';

function App() {
  return (
    <React.StrictMode>
      <RouterProvider router={router} />
    </React.StrictMode>
  );
};

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />);

router.tsx

import {
	createBrowserRouter,
	LoaderFunction,
	ActionFunction,
} from 'react-router-dom';

interface IRoute {
	path: string;
	Element: JSX.Element;
	loader?: LoaderFunction;
	action?: ActionFunction;
	ErrorBoundary?: JSX.Element;
}

const pages = import.meta.glob('/src/pages/**/[a-z[]*.tsx', { eager: true });

const routes: IRoute[] = [];
for (const path of Object.keys(pages)) {
	const fileName = path
		.replace(/\/src\/pages|index|\.tsx$/g, '')
		.replace(/\[\.{3}.+\]/, '*')
		.replace(/\[(.+)\]/, ':$1');

	routes.push({
		path: fileName === 'index' ? '/' : `${fileName.toLowerCase()}`,
		// @ts-ignore
		Element: pages[path].default,
		// @ts-ignore
		loader: pages[path]?.loader as unknown as LoaderFunction | undefined,
		// @ts-ignore
		action: pages[path]?.action as unknown as ActionFunction | undefined,
		// @ts-ignore
		ErrorBoundary: pages[path]?.ErrorBoundary as unknown as JSX.Element,
	});
}

const router = createBrowserRouter(
	routes.map(({ Element, ErrorBoundary, ...rest }) => ({
		...rest,
		// @ts-ignore
		element: <Element />,
		// @ts-ignore
		...(ErrorBoundary && { errorElement: <ErrorBoundary /> }),
	}))
);

export default router;