SolidJS•2mo ago

Different routes using different layouts, while doing file based routing please?

For example route /a uses layout ./src/lib/layouts/One.tsx and routes /b and /c use layout /Two.tsx I'd rather not just wrap the layout component in the route b/c then if we swap between pages that use the same layout state is lost Thanks!

12 Replies

peerreynders•2mo ago

src/routes/(one).tsx
src/routes/(one)/a.tsx
src/routes/(two).tsx
src/routes/(two)/b.tsx
src/routes/(two)/c.tsx

src/routes/(one).tsx
src/routes/(one)/a.tsx
src/routes/(two).tsx
src/routes/(two)/b.tsx
src/routes/(two)/c.tsx

https://docs.solidjs.com/solid-start/building-your-application/routing#route-groups + https://docs.solidjs.com/solid-start/building-your-application/routing#nested-layouts

Routing - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

all_is_source_energyOP•2mo ago

Brilliant! ty!

AK•2mo ago

i didn't see it mentioned in the articles (maybe it's not recommended?). the approach i've used is: <Router> <Route path="/" component={Home}> <Route path="/" component={LandingPage} /> <Route path="/login" component={Login} /> </Route> </Router> in my Home component I have the line below where I want the children to be: <div>{props.children}</div> You can create multiple group like this

Madaxen86•2mo ago

That’s also absolutely fine. You are using the component based approach. Peer showed the file routing approach. Advantage of file based routing is automatic code splitting for each route

all_is_source_energyOP•2mo ago

src/routes/(one).tsx --- Layout for (one) routes src/routes/(one)/a.tsx. --- UI for ./a (which uses the one layout) src/routes/(two).tsx. --- Layout for (two) routes src/routes/(two)/b.tsx --- UI for ./b (which uses the two layout) src/routes/(two)/c.tsx --- UI for ./c (which uses the two layout) Is this the expected behavior please? if yes I'll make a small example b/c in my more complex current example I'm not seeing this behavior but I wanna ensure I'm interpreting this correctly first please, thanks!

Madaxen86•2mo ago

Yep

all_is_source_energyOP•2mo ago

Thanks! So ./b should be a route in the following example please? ./routes/a.tsx - route showed up @ ./a ./routes/b.tsx - route showed up @ ./b ./routes/(c)/b.tsx - error @ ./b TypeError: response.headers is not iterable at sendWebResponse (file:/node_modules/h3/dist/index.mjs:929:39) at eval (/Users/chriscarrington/gotcontract/node_modules/vinxi/runtime/http.js:144:12) at eval (/Users/chriscarrington/gotcontract/node_modules/@solidjs/start/dist/middleware/index.jsx:10:54) at async _callHandler (file:/node_modules/h3/dist/index.mjs:1831:7) at async _callHandler (file:/node_modules/h3/dist/index.mjs:1837:16) at async file:/node_modules/h3/dist/index.mjs:1978:19 at async Object.callAsync (file:/node_modules/unctx/dist/index.mjs:72:16) at async Server.toNodeHandle (file:/node_modules/h3/dist/index.mjs:2270:7)

Madaxen86•2mo ago

Yes, but now you have two matched for the same route ./b

all_is_source_energyOP•2mo ago

Thanks I see my confusion, idk yet how to do layouts correctly with parens. My goal is (auth) folder w/ child files like [ ./routes/(auth)/sign-in.tsx ] and a layout file for the (auth) child files I tried ./routes/(auth).tsx and ./routes/auth.tsx for the layout file and neither worked yet thanks! & I just did something simple for the layout like: import { type JSX } from 'solid-js' export function Layout ( { children, ...props }: {children: JSX.Element } & JSX.IntrinsicElements['div']) { return <> <div id="abc" {...props}> {children} </div> </> }

peerreynders•2mo ago

idk yet how to do layouts correctly with parens.

Parenthesis are just a means of using directory names to organize the routes in the context of the file system while excluding (a part of) the directory name from the URL. Most basically:

src/routes/index.tsx

src/routes/index.tsx

can be expressed as

src/routes/(home).tsx

src/routes/(home).tsx

In the first case index is understood to be / by convention, while in the second case home is suppressed to arrive at /. Route layout files have the same name as the folder that holds the nested routes.

src/routes/auth.tsx         // Layout for routes under /auth
src/routes/auth/index.tsx   // /auth
src/routes/auth/sign-in.tsx // /auth/sign-in

src/routes/auth.tsx         // Layout for routes under /auth
src/routes/auth/index.tsx   // /auth
src/routes/auth/sign-in.tsx // /auth/sign-in

so then

src/routes/(auth).tsx         // Layout for routes under /(auth)
src/routes/(auth)/index.tsx   // /
src/routes/(auth)/sign-in.tsx // /sign-in

src/routes/(auth).tsx         // Layout for routes under /(auth)
src/routes/(auth)/index.tsx   // /
src/routes/(auth)/sign-in.tsx // /sign-in

and neither worked

If applied in the above manner src/routes/(auth).tsx should have worked as the layout for src/routes/(auth)/index.tsx. However I don't think that src/routes/(auth)/sign-in.tsx makes sense given that it needs to be available to as of yet unauthenticated users while I assume that src/routes/(auth).tsx is a layout to all the authenticated portions of the app. So this seems more likely

src/routes/sign-in.tsx        // /sign-in
src/routes/(auth).tsx         // Layout for routes under /(auth)
src/routes/(auth)/index.tsx   // /

src/routes/sign-in.tsx        // /sign-in
src/routes/(auth).tsx         // Layout for routes under /(auth)
src/routes/(auth)/index.tsx   // /

Routing - SolidDocs

Documentation for SolidJS, the signals-powered UI framework

peerreynders•2mo ago

You can still put your layout files in a place of you choosing:

// file: src/routes/(auth).tsx
import { One } from '~/lib/layouts/one.tsx'; 

export default One;

// file: src/routes/(auth).tsx
import { One } from '~/lib/layouts/one.tsx'; 

export default One;

Routes and route layouts receive RouteSectionProps by default where children is optionally included for layouts. Modules that are part of the routing have to have a default export. But you can also collocate modules that use named exports only and the file system router will ignore them when it is configuring the route.

GitHub

solid-router/src/types.ts at 3c214ce2ceb9b7d9d39d143229a8c6145e83e6...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

all_is_source_energyOP•2mo ago

Thanks for the thorough explanation! Super helpful & got it workin!

Gaming

Programming

Different routes using different layouts, while doing file based routing please?

Did you find this page helpful?