Layouts

Not many websites consist of completely independent pages. For instance, this very guide (which was made with Rakkas, of course - so meta!) has a header, a footer, and a navigation menu that are common to all pages. Rakkas provides a nested layout system to handle this use case. If you create a file named layout.jsx (or tsx) that default exports a React component, pages in the same directory and pages or nested layouts in its subdirectories will be wrapped by the layout.

Thematic grouping

Sometimes you want pages that don't share a common URL prefix to share a layout. You can group such pages under a directory with a name that starts with an underscore. The directory name will not be part of the URL path. For example you could have a directory structure like this:

• routes/
  • layout.jsx (the root layout, common to all pages)
  • _app/ (thematic group for most pages)
    • layout.jsx (common layout for most pages)
    • page.jsx (path: /)
    • about.page.jsx (path: /about)
    • blog.page.jsx (path: /blog)
  • _admin (thematic group for admin pages)
    • layout.jsx (common layout for admin pages)
    • settings.page.jsx (path: /settings)
    • users.page.jsx (path: /users)