Layouts w/ Component Rendering please?!

How may we group routes w/o a common path while using component rendering please? Below I tried not putting a path for the layout components but when I test this the app is a white screen & the server terminal says 'No route matched for preloading js assets". If I add a path for each layout this works but then the url has to be example: /guest/sign-in but the goal is for the url to be /sign-in and for the layout to be Guest w/ component rendering please!

import { Suspense } from 'solid-js'
import { MetaProvider } from '@solidjs/meta'
import { Router, Route, RouteSectionProps } from '@solidjs/router'


// pages
const SignIn = () => <div>sign up</div>
const SignUp = () => <div>sign up</div>
const Jazz = () => <div>jazz</div>


// layouts
const Guest = (props: RouteSectionProps) => <> <div>Guest</div> {props.children} </>
const Auth = (props: RouteSectionProps) => <> <div>Auth</div> {props.children} </>


export default () => <>
  <Router root={RootLayout}>
    <Route component={Guest}>
      <Route path="/sign-in" component={SignIn} />
      <Route path="/sign-up" component={SignUp} />
    </Route>
    <Route component={Auth}>
      <Route path="/jazz" component={Jazz} />
    </Route>
  </Router>
</>


function RootLayout (props: RouteSectionProps) {
  return <>
    <MetaProvider>
      <Suspense>{props.children}</Suspense>
    </MetaProvider>
  </>
}

import { Suspense } from 'solid-js'
import { MetaProvider } from '@solidjs/meta'
import { Router, Route, RouteSectionProps } from '@solidjs/router'


// pages
const SignIn = () => <div>sign up</div>
const SignUp = () => <div>sign up</div>
const Jazz = () => <div>jazz</div>


// layouts
const Guest = (props: RouteSectionProps) => <> <div>Guest</div> {props.children} </>
const Auth = (props: RouteSectionProps) => <> <div>Auth</div> {props.children} </>


export default () => <>
  <Router root={RootLayout}>
    <Route component={Guest}>
      <Route path="/sign-in" component={SignIn} />
      <Route path="/sign-up" component={SignUp} />
    </Route>
    <Route component={Auth}>
      <Route path="/jazz" component={Jazz} />
    </Route>
  </Router>
</>


function RootLayout (props: RouteSectionProps) {
  return <>
    <MetaProvider>
      <Suspense>{props.children}</Suspense>
    </MetaProvider>
  </>
}

import { Suspense } from 'solid-js'
import { MetaProvider } from '@solidjs/meta'
import { Router, Route, RouteSectionProps } from '@solidjs/router'


// pages
const SignIn = () => <div>sign up</div>
const SignUp = () => <div>sign up</div>
const Jazz = () => <div>jazz</div>


// layouts
const Guest = (props: RouteSectionProps) => <> <div>Guest</div> {props.children} </>
const Auth = (props: RouteSectionProps) => <> <div>Auth</div> {props.children} </>


export default () => <>
  <Router root={RootLayout}>
    <Route component={Guest}>
      <Route path="/sign-in" component={SignIn} />
      <Route path="/sign-up" component={SignUp} />
    </Route>
    <Route component={Auth}>
      <Route path="/jazz" component={Jazz} />
    </Route>
  </Router>
</>


function RootLayout (props: RouteSectionProps) {
  return <>
    <MetaProvider>
      <Suspense>{props.children}</Suspense>
    </MetaProvider>
  </>
}

import { Suspense } from 'solid-js'
import { MetaProvider } from '@solidjs/meta'
import { Router, Route, RouteSectionProps } from '@solidjs/router'


// pages
const SignIn = () => <div>sign up</div>
const SignUp = () => <div>sign up</div>
const Jazz = () => <div>jazz</div>


// layouts
const Guest = (props: RouteSectionProps) => <> <div>Guest</div> {props.children} </>
const Auth = (props: RouteSectionProps) => <> <div>Auth</div> {props.children} </>


export default () => <>
  <Router root={RootLayout}>
    <Route component={Guest}>
      <Route path="/sign-in" component={SignIn} />
      <Route path="/sign-up" component={SignUp} />
    </Route>
    <Route component={Auth}>
      <Route path="/jazz" component={Jazz} />
    </Route>
  </Router>
</>


function RootLayout (props: RouteSectionProps) {
  return <>
    <MetaProvider>
      <Suspense>{props.children}</Suspense>
    </MetaProvider>
  </>
}

Btw I also tried: <Route path="/(guest)" component={Guest}>

This matches the url

/(guest)/sign-in

/(guest)/sign-in

/(guest)/sign-in

/(guest)/sign-in so does not hide in the url like in File routing

Layouts w/ Component Rendering please?!

Similar Threads

Similar Threads

Similar Threads