CORE CONCEPTS

Layouts

A layout is a component that provides a common structure for multiple pages, such as a header, sidebar, or footer. Instead of repeating these elements in every page, you can define them in a layout and apply it to multiple routes.

Rasengan.js allows you to define layouts using a simple component-based approach.

Defining a Layout

To define a layout, create a React component and use the <Outlet /> component from rasengan. The <Outlet /> component will render the current page based on the active route.

Here is an example of a main layout that applies to all pages:

src/app/app.layout.tsx
tsximport React from "react";
import { LayoutComponent, Outlet } from "rasengan";
 
const AppLayout: LayoutComponent = () => {
  return (
    <div>
      <header>My Header</header>
      <Outlet /> {/* Renders the current page */}
      <footer>My Footer</footer>
    </div>
  );
};
 
AppLayout.path = "/"; // This layout applies to all pages
 
export default AppLayout;

Applying a Layout

To apply a layout, define it inside a Router. All pages within that router will automatically use the specified layout.

src/app/app.router.ts
tsximport { RouterComponent, defineRouter } from "rasengan";
import Home from "./home.page";
import AppLayout from "./app.layout";
 
class AppRouter extends RouterComponent {}
 
export default defineRouter({
  layout: AppLayout, // Apply the layout here
  pages: [Home], // Pages using the layout
})(AppRouter);

Nested Layouts Example

You can create multiple layouts to structure different sections of your application. Here’s how to define a dedicated Admin layout and apply it to specific pages.

1. Define the Admin Layout

src/app/admin.layout.tsx
tsximport React from "react";
import { LayoutComponent, Outlet } from "rasengan";
 
const AdminLayout: LayoutComponent = () => {
  return (
    <div>
      <h1>Admin Section</h1>
      <Outlet /> {/* Renders admin pages */}
    </div>
  );
};
 
AdminLayout.path = "/admin"; // This layout applies to admin pages
 
export default AdminLayout;

2. Define an Admin Page

src/app/dashboard.page.tsx
tsximport React from "react";
import { PageComponent } from "rasengan";
 
const Dashboard: PageComponent = () => {
  return <h2>Admin Dashboard</h2>;
};
 
Dashboard.path = "/dashboard"; // Will be available at /admin/dashboard
Dashboard.metadata = {
  title: "Dashboard",
  description: "Admin Dashboard",
};
 
export default Dashboard;

3. Create an Admin Router

src/app/admin.router.ts
tsximport { RouterComponent, defineRouter } from "rasengan";
import Dashboard from "./dashboard.page";
import AdminLayout from "./admin.layout";
 
class AdminRouter extends RouterComponent {}
 
export default defineRouter({
  layout: AdminLayout, // Apply the Admin layout
  pages: [Dashboard],
})(AdminRouter);

4. Include the Admin Router in the Main Router

src/app/app.router.ts
tsximport { RouterComponent, defineRouter } from "rasengan";
import Home from "./home.page";
import AppLayout from "./app.layout";
import AdminRouter from "./admin.router";
 
class AppRouter extends RouterComponent {}
 
export default defineRouter({
  imports: [AdminRouter], // Import the Admin router
  layout: AppLayout,
  pages: [Home],
})(AppRouter);

Now, visiting /admin/dashboard will render the AdminLayout with the Dashboard page inside it.

Summary

  • Layouts provide a shared structure for pages (e.g., headers, sidebars, footers).
  • Use <Outlet /> inside a layout to render the active page.
  • Define the layout in a router, and all pages within that router will use it.
  • Nested layouts allow different sections of the app to have different structures.
Routes
Linking and Navigation