FileRoutes

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

tsx
import { FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes } from "@solidjs/start/router";
<FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes />;

tsx
import { FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes } from "@solidjs/start/router";
<FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes />;

Usage

Using file-based routing to set up your `Router`

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

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

app.tsx

tsx
import { SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense } from "solid-js";
import { Router(alias) function Router(props: RouterProps): JSX.Element
import Router } from "@solidjs/router";
import { FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes } from "@solidjs/start/router";
 
export default function Appfunction App(): JSX.Element() {
  return (
    <Router(alias) function Router(props: RouterProps): JSX.Element
import Router rootA component that wraps the content of every route.

(property) root?: Component<RouteSectionProps<unknown>> | undefined={props(parameter) props: RouteSectionProps<unknown> => <SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>{props(parameter) props: RouteSectionProps<unknown>.children(property) RouteSectionProps<unknown>.children?: JSX.Element}</SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>}>
      <FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes />
    </Router(alias) function Router(props: RouterProps): JSX.Element
import Router>
  );
}

app.tsx

tsx
import { SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense } from "solid-js";
import { Router(alias) function Router(props: RouterProps): JSX.Element
import Router } from "@solidjs/router";
import { FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes } from "@solidjs/start/router";
 
export default function Appfunction App(): JSX.Element() {
  return (
    <Router(alias) function Router(props: RouterProps): JSX.Element
import Router rootA component that wraps the content of every route.

(property) root?: Component<RouteSectionProps<unknown>> | undefined={props(parameter) props: RouteSectionProps<unknown> => <SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>{props(parameter) props: RouteSectionProps<unknown>.children(property) RouteSectionProps<unknown>.children?: JSX.Element}</SuspenseTracks all resources inside a component and renders a fallback until they are all resolved
```typescript
const AsyncComponent = lazy(() => import('./component'));

<Suspense fallback={<LoadingIndicator />}>
  <AsyncComponent />
</Suspense>
```

(alias) function Suspense(props: {
    fallback?: JSX.Element;
    children: JSX.Element;
}): JSX.Element
import Suspense>}>
      <FileRoutes(alias) const FileRoutes: () => any[]
import FileRoutes />
    </Router(alias) function Router(props: RouterProps): JSX.Element
import Router>
  );
}

See the routing guide for more details.

FileRoutes

Usage

Using file-based routing to set up your Router

Using file-based routing to set up your `Router`