FileRoutes

FileRoutes is a component that renders a Route for each file in the routes directory.

tsx
import { FileRoutes } from "@solidjs/start";
<FileRoutes />;
tsx
import { FileRoutes } from "@solidjs/start";
<FileRoutes />;

Usage

Using file-based routing to set up your Routes

The <FileRoutes> component collects routes from the file-system in the /routes folder to be inserted into a parent <Routes> component.

Since FileRoutes returns a route configuration, it must be placed directly inside a <Routes>, usually the one in your root.tsx file.

app.tsx
tsx
import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
 
export default function App() {
return (
<Router root={props => <Suspense>{props.children}</Suspense>}>
<FileRoutes />
</Router>
);
}
app.tsx
tsx
import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
 
export default function App() {
return (
<Router root={props => <Suspense>{props.children}</Suspense>}>
<FileRoutes />
</Router>
);
}

See the routing guide for more details.