Components

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"));

prop	type	description
children	`JSX.Element`, `RouteDefinition`, or `RouteDefinition[]`	The route definitions
root	Component	Top level layout component
base	string	Base url to use for matching routes
actionBase	string	Root url for server actions, default: `/_server`
preload	boolean	Enables/disables preloads globally, default: `true`
explicitLinks	boolean	Disables all anchors being intercepted and instead requires `<A>`. default: `false`
url	string	The initial route to render

Report an issue with this page