SolidJS•3y ago

Solid Router Layouts

What is the correct way to handle layouts in solid router? I was thinking of something similar to sveltekit, but I can't find anything about it

1 Reply

gh680•3y ago

I got something working - using file-based routing and layout components utilizing <Outlet />. I have a global layout in /routes/(root).tsx that looks like:

import { Outlet } from '@solidjs/router'
import styles from './style.module.scss'

export default function GlobalLayout() {
    return (
        <div class={styles.globalLayout}>
            <Outlet />
        </div>
    )
}

import { Outlet } from '@solidjs/router'
import styles from './style.module.scss'

export default function GlobalLayout() {
    return (
        <div class={styles.globalLayout}>
            <Outlet />
        </div>
    )
}

Newish to solid, and to file-based routes, but this worked (and I actually have a tiered layout setup that I got working) so hopefully it's helpful?

Gaming

Programming

Solid Router Layouts