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: /)
      • (path: /about)
      • (path: /blog)
    • _admin (thematic group for admin pages)
      • layout.jsx (common layout for admin pages)
      • (path: /settings)
      • (path: /users)