Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
File based routing for vite, preact and wouter
import { Route, Switch } from "wouter-preact";
const pageFiles = import.meta.globEager("./pages/**/*.tsx");
const pages = Object.keys(pageFiles)
.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} />}
.concat(<div>404: Not Found!</div>);
export const App = () => <Switch>{pages}</Switch>;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment