solidjs.com

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>
  <FileRoutes />
</Routes>
tsx
<Routes>
  <FileRoutes />
</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, Route } from "solid-start";
 
import Home from "./pages/Home";
import Users from "./pages/Users";
 
export default function App() {
  return <>
    <h1>My Site with Lots of Pages</h1>
    <Routes>
      <Route path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/about" element={<div>This site was made with Solid</div>} />
    </Routes>
  </>
}
root.tsx
tsx
import { Routes, Route } from "solid-start";
 
import Home from "./pages/Home";
import Users from "./pages/Users";
 
export default function App() {
  return <>
    <h1>My Site with Lots of Pages</h1>
    <Routes>
      <Route path="/" component={Home} />
      <Route path="/users" component={Users} />
      <Route path="/about" element={<div>This site was made with Solid</div>} />
    </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, Body, Routes, FileRoutes } from "solid-start";
 
export default function Root() {
  return (
    <Html>
      <Body>
        <Routes>
          <FileRoutes />
        </Routes>
      </Body>
    </Html>
  );
}
root.tsx
tsx
import { Html, Body, Routes, FileRoutes } from "solid-start";
 
export default function Root() {
  return (
    <Html>
      <Body>
        <Routes>
          <FileRoutes />
        </Routes>
      </Body>
    </Html>
  );
}

See the routing guide for more details about how to define routes using files.