Layouts

To maintain consistency across an application's page you can use layouts. Layouts are components that wrap the content of a route and can be used to define a common structure for all pages or specific sections of an application.

Root-level layouts

A root-level layout acts as a container surrounding all routes within your application. To define a root-level layout, pass the layout component to the root prop of the Router component:

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

import Home from "./pages/Home";

const Layout = (props) => {
    return (
        <>
            <header>Header</header>
            {props.children}
            <footer>Footer</footer>
        </>
    );
};

render(
    () => (
        <Router root={Layout}>
            <Route path="/" component={Home} />
            <Route path="/hello-world" component={<div>Hello world!</div>} />

        </Router>
    ),
    document.getElementById("app")
);

With the root-level layout, props.children will be replaced with the content of current route. This means that while the words "Header" and "Footer" will be displayed on every page, the content between them will change depending on the current route. For example, when the route is /hello-world, you will see the text "Hello world!" between the header and footer.

Nested layouts

When you want to create a layout that is specific to a group of routes, you can nest routes within a layout component. This can be done by passing props.children to the component where the nested routes are defined:

function PageWrapper(props) {
  return (
    <div>
      <h1> We love our users! </h1>
      {props.children}
      <A href="/">Back Home</A>
    </div>
  );
}

While the routes are still configured the same, the route's elements will appear inside the parent element where the props.children was declared. For PageWrapper to be used as a layout, in this case, you can pass it as a component to the parent route:

<Router>
    <Route path="/users" component={PageWrapper}>
        <Route path="/" component={Users} />
        <Route path="/:id" component={User} />
    </Route>
</Router>

Now, when the route is /users, the content of the Users component will be displayed inside the PageWrapper component. Similarly, when navigating to /users/1, the content of the User component will be displayed inside the PageWrapper component as well.