File based routing for vite, preact and wouter

file-base-routing-with-preact-vite-wouter.tsx

import { Route, Switch } from "wouter-preact";

const pageFiles = import.meta.globEager("./pages/**/*.tsx");

const pages = Object.keys(pageFiles)
  .sort()
  .reverse() // Ensure the order of page file names. Put `:<filename>` to the end of the array.
  .map((filePath) => {
    const path = filePath.slice(8, -4).replace(/\/?index$/, "");
    const { Page } = pageFiles[filePath];

    return (
      <Route key={path} path={`/${path}`}>
        {(params) => <Page {...params} />}
      </Route>
    );
  })
  .concat(<div>404: Not Found!</div>);

export const App = () => <Switch>{pages}</Switch>;