SolidJS•7mo ago

Nested Routing

Hello Friends. i think this isn't something new. and probably asked before. Im coming from stuff like react router or even next/sveltekit. I know theres Outlets. i know i could probably match urls and return the right component. But i dont see a recommended way of doing this. can someone lead me to a way of doing this?

6 Replies

Silvan•7mo ago

so dashboard renders a screen with navigation. and the right part should be defined by dashboard/:whatever

thetarnav•7mo ago

have you seen this? https://github.com/solidjs/solid-router#nested-routes

GitHub

GitHub - solidjs/solid-router: A universal router for Solid inspire...

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

Silvan•7mo ago

yep and im having a hard time understanding it. first up theres examples with <Routes and a path prop which it dosent have? is it fine to use multiple <Routes components? like i cant form a pattern in my head yet its not entirely like a <slot /> as in astro or svelte either

Calhistorian•7mo ago

@Silvan I have this precise setup using solid-router Here are the routes

<Route path="/settings" component={Settings}>
  <Route path="/" component={ProfileSettings} />
  <Route path="/accounts" component={AccountSettings} />
  <Route path="/appearance" component={AppearanceSettings} />
  <Route path="/keyboard" component={KeyboardSettings} />
  <Route path="/search" component={SearchSettings} />
  <Route path="/security" component={SecuritySettings} />
  <Route path="/sandbox" component={SandboxSettings} />
  <Route path="/about" component={About} />
  <Route path="/**" component={Error} />
</Route>

<Route path="/settings" component={Settings}>
  <Route path="/" component={ProfileSettings} />
  <Route path="/accounts" component={AccountSettings} />
  <Route path="/appearance" component={AppearanceSettings} />
  <Route path="/keyboard" component={KeyboardSettings} />
  <Route path="/search" component={SearchSettings} />
  <Route path="/security" component={SecuritySettings} />
  <Route path="/sandbox" component={SandboxSettings} />
  <Route path="/about" component={About} />
  <Route path="/**" component={Error} />
</Route>

Silvan•7mo ago

i actually got it working,. thanks!

Calhistorian•7mo ago

Well the rest of my message is not necessary - great

Gaming

Programming

Nested Routing