S
SolidJS•6d ago
all_is_source_energy

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>
  </>
}
Btw I also tried: <Route path="/(guest)" component={Guest}> This matches the url /(guest)/sign-in so does not hide in the url like in File routing
3 Replies
Madaxen86
Madaxen86•6d ago
What you did should work (not providing a path prop to Route): https://stackblitz.com/edit/github-q6b2byxy?file=src%2Fapp.tsx
all_is_source_energy
all_is_source_energyOP•6d ago
We can do FileRoutes and component routing at the same time! Wow talk about luxry! And yay it works thank you so much! The original bug was user error, I had some css on the page that had the text turn white so with the white background i thought it didn't work 😅 Solid was always workin!
Madaxen86
Madaxen86•6d ago
Classic 😂

Did you find this page helpful?