Layouts

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.

pages/layout.jsx
import React from "react";
import { NavLink } from "rakkasjs";

const MainLayout = ({ children }) => (
	<div>
		<header>Shared header</header>
		<nav>
			<NavLink
				href="/examples/layout"
				currentRouteStyle={{ fontWeight: "bold" }}
			>
				Home
			</NavLink>{" "}
			|{" "}
			<NavLink
				href="/examples/layout/about"
				currentRouteStyle={{ fontWeight: "bold" }}
			>
				About
			</NavLink>
		</nav>
		<hr />
		<div style={{ padding: "1rem", background: "#ddd" }}>{children}</div>
		<hr />
		<footer>Shared footer</footer>
	</div>
);

export default MainLayout;
pages/page.jsx
import React from "react";
import { Helmet } from "react-helmet-async";

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

export default Home;
pages/about.page.jsx
import React from "react";

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

export default About;
Rakaks 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: /)
      • 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.tsx (path: /settings)
      • users.page.tsx (path: /users)