Layouts in Node.js frameworks have always bothered me, especially the React frameworks. It feels like layouts have always been an afterthought. Davaux tries to take a different approach from root layouts and nesting. In fact, if you want, every page served by Davaux (or statically generated) could have it's own layout, if desired (starting with 0.9.0).
Davaux 0.9.0 adds Route Groups, which allow you to either use the root layout, nest a layout, or designate an isolated layout. It works like this:
src/routes/
(app)/
_layout.tsx ← site chrome (nav, footer)
about.page.tsx → /about
contact.page.tsx → /contact
(home)/
+layout.tsx ← isolated homepage layout
index.page.tsx → /
(auth)/
+layout.tsx ← isolated minimal auth layout
login.page.tsx → /login
register.page.tsx → /register
dashboard/
+layout.tsx ← isolated dashboard layout
index.page.tsx → /dashboard
settings.page.tsx → /dashboard/settings(app) is the root, which is the layout for /about and /contact. (home) is the homepage - / - it gets it's own layout, designated by +layout.tsx. (auth) also gets it's own layout, even though it's routing is under root - /. dashboard also gets it's own layout, but is served at /dashboard, whereas the other routes are served from /.
Everything that worked in the earlier versions of Davaux still works - if you want routes in folders (similar dashboard), just create the folder without a layout and it falls under the (app) Route Group. It's the complete routing and layout system, easily identifiable just by looking at the routes.
David D.
No Comments