Routes
Routes
is a special Switch
component that renders the correct Route
child based on the users' location, and switches between them as the user navigates.
tsx
<Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
/> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
>
tsx
<Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
/> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
>
Usage
Defining your own routes
The <Routes>
component is a control flow component. It can be thought of a special <Switch>
component. Instead of accepting DOM elements as children, it actually accepts route configuration objects. Our <Route>
components actually return route configuration objects. The <Routes>
component merges theses into one big routing configuration. It uses one of Solid's secrets that a component can return anything.
It's up to the parent to decide what to do with the children. It receives <Route>
components as children that define the various pages of your application. Like a <Switch>
component, <Routes>
decides which of its children to render. It uses the URLPattern
rules against the path
to match which <Route>
child to render. And when the user navigates to a different location, this component will switch to the new <Route>
and render it.
root.tsx
tsx
import { Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
, Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
} from "solid-start";
import Home(alias) function Home(): JSX.Element
import Home
from "./pages/Home"; import Users(alias) function Users(): JSX.Element
import Users
from "./pages/Users";
export default function Appfunction App(): JSX.Element
() { return <>
<h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
>My Site with Lots of Pages</h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
> <Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/" | "/"[]
="/" component(property) component: Component<{}>
={Home(alias) function Home(): JSX.Element
import Home
} /> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/users" | "/users"[]
="/users" component(property) component: Component<{}>
={Users(alias) function Users(): JSX.Element
import Users
} /> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/about" | "/about"[]
="/about" element(property) element?: JSX.Element
={<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>This site was made with Solid</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>} /> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> </>
}
root.tsx
tsx
import { Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
, Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
} from "solid-start";
import Home(alias) function Home(): JSX.Element
import Home
from "./pages/Home"; import Users(alias) function Users(): JSX.Element
import Users
from "./pages/Users";
export default function Appfunction App(): JSX.Element
() { return <>
<h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
>My Site with Lots of Pages</h1(property) JSX.HTMLElementTags.h1: JSX.HTMLAttributes<HTMLHeadingElement>
> <Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/" | "/"[]
="/" component(property) component: Component<{}>
={Home(alias) function Home(): JSX.Element
import Home
} /> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/users" | "/users"[]
="/users" component(property) component: Component<{}>
={Users(alias) function Users(): JSX.Element
import Users
} /> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/about" | "/about"[]
="/about" element(property) element?: JSX.Element
={<div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>This site was made with Solid</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>} /> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> </>
}
Using file based routing
Manually importing all your routes can be tedious and error-prone, so, SolidStart gives you file-system routing. This allows you to define the routes via a folder structure under the /routes
folder. You can pass them into the <Routes>
component with the <FileRoutes>
component.
root.tsx
tsx
import { Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
, Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
, Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
, FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
} from "solid-start";
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> <Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
> <Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
/> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> </Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> );
}
root.tsx
tsx
import { Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
, Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
, Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
, FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
} from "solid-start";
export default function Rootfunction Root(): JSX.Element
() { return (
<Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> <Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
> <Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <FileRoutes(alias) function FileRoutes(): JSX.Element
import FileRoutes
/> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> </Body(alias) function Body(props: ComponentProps<"body">): JSX.Element
import Body
> </Html(alias) function Html(props: ComponentProps<"html">): JSX.Element
import Html
> );
}
See the routing guide for more details about how to define routes using files.