@ataye/client-server-vite-tailwind/template/client/src/modules/PageRouter.jsx

Boilerplate for an express client-server application using Vite and Tailwind CSS

import { BrowserRouter, createBrowserRouter, RouterProvider } from "react-router-dom";

const pages = import.meta.glob("../pages/**/*.jsx", { eager: true });
// console.log(pages)

const routes = [];
for (const path of Object.keys(pages)) {
  const fileName = path.match(/\.\/pages\/(.*)\.jsx$/)?.[1];
  // console.log('FN', fileName)
  if (!fileName) {
    continue;
  }

  const normalizedPathName = fileName.includes("$")
    ? fileName.replace("$", ":")
    : fileName.replace(/\/index/, "");

  // console.log(normalizedPathName, pages[path])

  routes.push({
    path: fileName === "index" ? "/" : `/${normalizedPathName.toLowerCase()}`,
    Element: pages[path].default,
    loader: pages[path]?.loader,
    action: pages[path]?.action,
    ErrorBoundary: pages[path]?.ErrorBoundary,
  });
}

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


const PageRouter = () => {
    return <RouterProvider router={router} />
}

export default PageRouter