Access Router state in application layout that wraps around routes

Hey there! I have an application structure like this:

<AppLayout>
  <Router>
    // my routes
  <Router/>
<AppLayout/>

<AppLayout>
  <Router>
    // my routes
  <Router/>
<AppLayout/>

AppLayoutis where all my page navigation goes. However, because it's outside of the router context, I am unable to access it (e.g. to highlight the currently active route). Thought I could fix it by doing this:

<Router>
  <AppLayout>
    // my routes
  </AppLayout>
</Router>

<Router>
  <AppLayout>
    // my routes
  </AppLayout>
</Router>

But it still won't let me access my routes. I guess I'm not really following the idiomatic way for creating a page/router hierarchy in solid. I could obviously also impirt my layout in all my routes but I'd rather not do that. I kinda like doing it like this. Any suggestions? 🙂

1 Reply

spuxxOP•4mo ago

I didn't look hard enough! solid/router supports my exact usecase: https://docs.solidjs.com/solid-router/concepts/layouts#layouts

Layouts - Solid Docs

Documentation for SolidJS, the signals-powered UI framework

Gaming

Programming

Access Router state in application layout that wraps around routes

Did you find this page helpful?