Not many websites consist of completely independent pages. This very guide (which was made with Rakkas, of course - so meta!), for instance, 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 and more. If you create a file named layout.jsx (or tsx, or any other extension included in the pageExtensions configuration option) 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.

import React from "react";
import { StyledLink } from "rakkasjs";

const MainLayout = ({ children }) => (
		<header>Shared header</header>
			<StyledLink href="/examples/layout" activeStyle={{ fontWeight: "bold" }}>
			</StyledLink>{" "}
			|{" "}
				activeStyle={{ fontWeight: "bold" }}
		<hr />
		<div style={{ padding: "1rem", background: "#ddd" }}>{children}</div>
		<hr />
		<footer>Shared footer</footer>

export default MainLayout;
import React from "react";
import { Helmet } from "react-helmet-async";

const Home = () => (
		<Helmet title="Layout Example - Rakkas" />
		Hello from <b>home</b> page!

export default Home;
import React from "react";

const About = () => (
		Hello from <b>about</b> page!

export default About;
Rakkas Demo App

Thematic grouping

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

  • pages/
    • 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)