SolidJS•3d ago

How do Layouts work with SolidStart?

I wasn't able to find a layout chapter in the docs for this :S I found this https://docs.solidjs.com/solid-router/concepts/layouts and this https://github.com/solidjs/solid-start/discussions/846 So I created a file /src/routes/(layout).tsx ( besides the index file ) with the following content

export default function Layout(props) {
    return (
        <>
            <div>Header goes here</div>
            {props.children}
        </>
    );
};

export default function Layout(props) {
    return (
        <>
            <div>Header goes here</div>
            {props.children}
        </>
    );
};

but unfortunately this file was ignored. - How do I have to name this file? - TS doesn't know the type for props, what to import here? Wasn't able to find something like LayoutProps Thanks in advance! 🙂

8 Replies

Madaxen86•3d ago

File-routing is documented in the SolidStart part of the docs: https://docs.solidjs.com/solid-start/building-your-application/routing#nested-layouts

Routing - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

GarzecOP•3d ago

ah, thanks! But it isn't quite clear to me how to do it for root layouts :S A single index page with a base layout should be

/routes/index.tsx // layout
/routes/index/(index).tsx // additional folder + page

/routes/index.tsx // layout
/routes/index/(index).tsx // additional folder + page

Madaxen86•3d ago

(rootLayout).tsx plus folder (rootLayout) which contains all routes. the tsx file is a sibling to the folder (not inside it)

Madaxen86•3d ago

example (with-nav) and (with-nav).tsx

Madaxen86•3d ago

Not: You can always wrap the children in the app.tsx in a RootLayout if you are really sure the all routes will need this layout without any exceptions.

GarzecOP•3d ago

Ah, thanks for the help 🙂

Carl (klequis)•2d ago

If you need more help I covered layouts in book format and it is free: https://leanpub.com/solidstart-routing-book

Leanpub

SolidStart Routing

A hands-on guide to learning client-side routing with SolidStart and Solid Router, covering file-based routing, static and dynamic routes, navigation, nested layouts and more.

dtnc•2d ago

for a root layout that is applies to all routes, you should be able to wrap the line <Suspense>{props.children}</Suspense> in src/app.tsx with your layout as well.

Gaming

Programming

How do Layouts work with SolidStart?

Did you find this page helpful?