LayoutComponent

LayoutComponent is a functional component that defines the structure of a layout component.

Example

import { LayoutComponent, Outlet } from "rasengan";
 
const AppLayout: LayoutComponent = () => {
  return (
    <div>
      <header>
        <h1>App Layout</h1>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}
 
AppLayout.path = "/";
 
export default AppLayout;

The LayoutComponent function component requires a path property to define the route layout that will be considered as the base path of all pages that will use the layout.

Inside the return, the Outlet component is used to render the child components of the layout.

Properties and Methods

The LayoutComponent function has the following properties and methods:

Properties

• path: The path of the layout component. This is used to define the route layout that will be considered as the base path of all pages that will use the layout.

Methods

• loader(): Similar to getServerSideProps() in Next.js, this method is used to make some operations on the server before the layout is rendered. It should return a promise with the result of the operations.

The loader() method is optional. The returned promise has to follow the following structure:

type LoaderResponse = {
  props?: { [key: string]: any };
  redirect?: string
};

Example with loader() method

return props

import { LayoutComponent, Outlet } from "rasengan";
 
type Props = {
  title: string;
};
 
const AppLayout: LayoutComponent = ({ title }: Props) => {
   return (
    <div>
      <header>
        <h1>{title}</h1>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}
 
AppLayout.path = "/";
 
AppLayout.loader = async () => {
  // You can make some operations here
 
  return {
    props: {
      title: "App Layout"
    }
  };
};
 
export default AppLayout;

In the example above, the loader method is used to make some operations on the server before the layout is rendered.

The loader method returns a promise with the props that will be passed to the layout component.

redirect

You can also use the redirect property to redirect the user to another page.

import { LayoutComponent, Outlet } from "rasengan";
 
type Props = {
  title: string;
};
 
const AppLayout: LayoutComponent = ({ title }: Props) => {
   return (
    <div>
      <header>
        <h1>{title}</h1>
      </header>
      <main>
        <Outlet />
      </main>
    </div>
  );
}
 
AppLayout.path = "/";
 
AppLayout.loader = async () => {
  const isAuth = false;
 
  if (!isAuth) {
    return {
      redirect: "/login"
    };
  }
 
  return {
    props: {
      title: "App Layout"
    }
  };
};
 
export default AppLayout;

use arguments

You have to possibility to access to some parameters via the loader methods:

• params: Which is an object containing the list of params passed into the URL.
• request: Which is the request object from the server.

import { LoaderOptions } from "rasengan"
 
AppLayout.loader = async loader({ params, request }: LoaderOptions) {
  // You can make some operations here
 
  return {
    props: {}
  }
}