S
SolidJS•2mo 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•2mo 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•2mo 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•2mo ago
Classic 😂

Did you find this page helpful?