Router

The Router component is a top level component that manages the routing of your application. There is an optional root prop that can be used to wrap the entire application in a layout component, which will not be updated when the page changes.

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

const App = (props) => (
  <>
    <h1>Root header</h1>
    {props.children}
  </>
);

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

children

Type: JSX.Element | RouteDefinition | RouteDefinition[]

The route definitions.

root

Type: Component

Top level layout component.

base

Type: string

Base url to use for matching routes.

actionBase

Type: string

Default: "/_server"

Root url for server actions.

preload

Type: boolean

Default: true

Enables/disables preloads globally.

explicitLinks

Type: boolean

Default: false

Disables all anchors being intercepted and instead requires <A>. (To disable interception for a specific link, set target to any value, e.g. <a target="_self">.)

url

Type: string

The initial route to render.