PageComponent

PageComponent is a functional component that defines a page in a Rasengan.js app.

Example

home.page.tsx

import { PageComponent } from "rasengan";
 
const Home: PageComponent = () => {
  return (
    <div>Home page</div>
  )
}
 
Home.path = "/";
Home.metadata = {
  title: "Home",
  description: "Home Page"
}
 
export default Home;

Similar to LayoutComponent, the PageComponent component requires a path property to define the route of the page.

Properties and Methods

The PageComponent functional component has the following properties and methods:

Properties

path: The path of the page. It is used to define the route of the page.
metadata: The metadata of the page. It is used to define the title, description of the page and other things.

Methods

loader(): Similar to getServerSideProps() in Next.js, this method is used to make some operations on the server before the page is rendered.

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

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

props: The props that will be passed to the page component.
redirect: The path to redirect the user.

The props and redirect are optional. If the redirect is defined, the props will be ignored.

Example with `loader()` method

All what was mentioned in the LayoutComponent section about loader is applied here.

Just read the loader paragraph in the LayoutComponent section.

LayoutComponent RouterComponent