Route

Route creates a route definition. It describes a path segment, the component for the match, route data setup, metadata, and nested child routes.

Import

import { Route } from "@solidjs/router";

Type

type RouteProps<S extends string, T = unknown> = {
  path?: S | S[];
  children?: JSX.Element;
  preload?: RoutePreloadFunc<T>;
  matchFilters?: MatchFilters<S>;
  component?: Component<RouteSectionProps<T>>;
  info?: Record<string, any>;
  load?: RoutePreloadFunc<T>;
};

function Route<S extends string, T = unknown>(
  props: RouteProps<S, T>
): JSX.Element;

Props

path

• Type: S | S[]
• Optional: Yes

Path segment or path segments matched by the route.

children

• Type: JSX.Element
• Optional: Yes

Nested route definitions below this segment.

preload

• Type: RoutePreloadFunc<T>
• Optional: Yes

Function called for route preloading and route data setup.

matchFilters

• Type: MatchFilters<S>
• Optional: Yes

Additional constraints for path parameter matching.

component

• Type: Component<RouteSectionProps<T>>
• Optional: Yes

Component rendered for this route match.

info

• Type: Record<string, any>
• Optional: Yes

Route metadata stored on the route definition.

load

• Type: RoutePreloadFunc<T>
• Optional: Yes

Deprecated alias for preload.

Behavior

• Resolves children and returns the route props as a route definition object.
• When route branches are created, preload is used for route preloading. If preload is absent, load is used.
• Array path values create one route description per path.

Examples

Basic usage

import { Route, Router } from "@solidjs/router";

function Home() {
  return <h1>Home</h1>;
}

export default function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
    </Router>
  );
}

Related

• Router
• preload