S
SolidJS•2y ago
Davide

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
gh680•2y 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?
Want results from more Discord servers?
Add your server
More Posts
how to use from or reconcile with an external producerI try to use an external store (https://github.com/nerdslabs/storex) with solid. To try it out I coExport an IIFE build with esbuild not working as expectedIs there any guide on how to export an IIFE build? I tried setting up esbuild to do that but it doesSVG path animation in Solid like Svelte's transition drawhttps://v2.svelte.dev/repl?version=2.6.2&gist=897a0ede58c59201d57cee7f119bee50 https://github.com/svHow to properly type the `mergeProps` with Typescript?I'm using the `mergeProps` function to enter some default props for my component, but this is causinreactive initialValue on createResourceis it possible to make initialValue react based on a signal? I have this: ``` const [namespaces] Can I create a hole in SuspenseI might just be having a brain fart here - so please be gentle. I confess to not using Suspense in Is the on change broken for file inputs?It only ever seems to trigger once, and it's not processing updates. I might have screwed something How to have kind of 'named slot' in Solid like Vue?I know there is 'props.children' But I want to place each children to different location inside co