Routing

Defining Routes

Routes can be defined directly in an app's template using JSX, but can also be passed to a route configuration directly as an object.

Component Routing

To define routes using JSX, the Route component is used to define a path and the component to render when the user navigates to that path.

Add each route to a <Router> using the Route component. A path as well as an element or component to render must be provided for when the user navigates to the indicated path.

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

import Home from "./pages/Home";
import Users from "./pages/Users";

render(
  () => (
    <Router>
      <Route path="/users" component={Users} />
      <Route path="/" component={Home} />
    </Router>
  ),
  document.getElementById("app")
);

Provide a root level layout (optional)

A root level layout will always be present and will not update on page change. This is the ideal place for any top level navigation and Context Providers.

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

import Home from "./pages/Home";
import Users from "./pages/Users";
import Nav from "./components/Nav";

const App = (props) => (
  <>
    <h1>Site Title</h1>
    <Nav />
    {props.children}
  </>
);

render(
  () => (
    <Router root={App}>
      <Route path="/users" component={Users} />
      <Route path="/" component={Home} />
    </Router>
  ),
  document.getElementById("app")
);

Create a CatchAll Route (404 page)

When pages are not found at any nested level, providing a catchall, or 404 page, provides a fallback option to display to the user. The asterisk (*) is used, along with optionally specifying a parameter's name, to access the remaining portion of the path.

import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

import Home from "./pages/Home";
import Users from "./pages/Users";
import NotFound from "./pages/404";

const App = (props) => (
  <>
    <h1>My Site with lots of pages</h1>
    {props.children}
  </>
);

render(
  () => (
    <Router root={App}>
      <Route path="/users" component={Users} />
      <Route path="/" component={Home} />
      <Route path="*404" component={NotFound} />
    </Router>
  ),
  document.getElementById("app")
);

Lazy-load route components

This way, the Users and Home components will only be loaded when navigating to /users or /, respectively.

import { lazy } from "solid-js";
import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

const Users = lazy(() => import("./pages/Users"));
const Home = lazy(() => import("./pages/Home"));

const App = (props) => (
  <>
    <h1>My Site with lots of pages</h1>
    {props.children}
  </>
);

render(
  () => (
    <Router root={App}>
      <Route path="/users" component={Users} />
      <Route path="/" component={Home} />
    </Router>
  ),
  document.getElementById("app")
);

Configuration-based Routing

JSX is not needed to set up routes. Routes can be defined as an array of route definitions and passed to the Router component:

import { lazy } from "solid-js";
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";

const routes = [
  {
    path: "/users",
    component: lazy(() => import("/pages/users.js")),
  },
  {
    path: "/users/:id",
    component: lazy(() => import("/pages/users/[id].js")),
    children: [
      {
        path: "/",
        component: lazy(() => import("/pages/users/[id]/index.js")),
      },
      {
        path: "/settings",
        component: lazy(() => import("/pages/users/[id]/settings.js")),
      },
      {
        path: "/*all",
        component: lazy(() => import("/pages/users/[id]/[...all].js")),
      },
    ],
  },
  {
    path: "/",
    component: lazy(() => import("/pages/index.js")),
  },
  {
    path: "/*all",
    component: lazy(() => import("/pages/[...all].js")),
  },
];

render(() => <Router>{routes}</Router>, document.getElementById("app"));

Additionally, a single route definition object for a single route can be passed:

import { lazy } from "solid-js";
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";

const route = {
  path: "/",
  component: lazy(() => import("/pages/index.js")),
};

render(() => <Router>{route}</Router>, document.getElementById("app"));

Report an issue with this page

Contribute