CORE CONCEPTS

Configuring a Router in Rasengan.js

In this guide, you will learn how to configure routers in Rasengan.js, including setting up pages and layouts to structure your application effectively.

Understanding Routers in Rasengan.js

A Router in Rasengan.js is a collection of pages grouped under a common structure ( layout ). It defines how different pages are connected and whether they share a common Layout.

Each router:

Contains multiple pages.
Can import other routers for modularity.
Can have an optional layout that wraps all its pages.

Creating a Router

To define a router, follow these steps:

[01]Create the Router Component

A router is a class component that extends RouterComponent. Paste the following code inside the src/app/app.router.ts file.

src/app/app.router.ts

typescriptimport { RouterComponent } from "rasengan";
 
class AppRouter extends RouterComponent {}

[02]Configure the Router

Use the defineRouter function to configure the router by specifying:

Imported routers (if any)
The layout (optional)
The list of pages

src/app/app.router.ts

typescriptimport { RouterComponent, defineRouter } from "rasengan";
 
class AppRouter extends RouterComponent {}
 
export default defineRouter({
  imports: [], // Import other routers
  layout: null, // Define a layout if needed
  pages: [] // Add pages
})(AppRouter);

Adding a Layout

TypeScript

JavaScript

src/app/app.layout.tsx

tsximport React from "react";
import { LayoutComponent, Outlet } from "rasengan";
 
const AppLayout: LayoutComponent = () => {
  return (
    <div>
      <header>My Header</header>
      <Outlet />
      <footer>My Footer</footer>
    </div>
  );
};
 
AppLayout.path = "/";
export default AppLayout;

Creating a Page

TypeScript

JavaScript

src/app/home.page.tsx

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

Finalizing the Router

Once you have set up your layout and pages, update your app.router.ts or app.router.js file:

TypeScript

JavaScript

src/app/app.router.ts

typescriptimport { RouterComponent, defineRouter } from "rasengan";
import AppLayout from "./app.layout";
import Home from "./home.page";
 
class AppRouter extends RouterComponent {}
 
export default defineRouter({
  imports: [],
  layout: AppLayout,
  pages: [Home]
})(AppRouter);

Sub Routers

sub routers are routers that are nested within another router. They are useful for creating modular and complex applications routing structure.

Let's take a situation where you want to create an application with a dashboard and an authentication section. You can create a DashboardRouter and an AuthRouter and nest them within the AppRouter.

Creating a Sub Router

To create a sub router, you can just define a new router and import it into the parent router.

src/app/dashboard.router.ts

typescriptimport { RouterComponent, defineRouter } from "rasengan";
 
class DashboardRouter extends RouterComponent {}
 
export default defineRouter({
  imports: [],
  layout: null,
  pages: []
})(DashboardRouter);

src/app/auth.router.ts

typescriptimport { RouterComponent, defineRouter } from "rasengan";
 
class AuthRouter extends RouterComponent {}
 
export default defineRouter({
  import: [],
  layout: null,
  pages: []
})(AuthRouter);

Nesting Sub Routers

To nest the sub routers within the parent router, import the sub routers into the parent router and add them to the import property.

src/app/app.router.ts

typescriptimport { RouterComponent, defineRouter } from "rasengan";
import AppLayout from "./app.layout";
import Home from "./home.page";
import DashboardRouter from "./dashboard.router";
import AuthRouter from "./auth.router";
 
class AppRouter extends RouterComponent {}
 
export default defineRouter({
  imports: [DashboardRouter, AuthRouter],
  layout: AppLayout,
  pages: [Home]
})(AppRouter);

Now you have two sub routers nested within the AppRouter. These sub routers can have their own pages and layouts, making your application structure more modular and organized.

By default, sub routers inherit the layout of the parent router. However, you can specify whether or not a sub router should use the parent router's layout by setting the useParentLayout property to true or false.

src/app/dashboard.router.ts

typescriptimport { RouterComponent, defineRouter } from "rasengan";
 
class DashboardRouter extends RouterComponent {}
 
export default defineRouter({
  imports: [],
  layout: null,
  pages: [],
  useParentLayout: false // Do not use the parent layout
})(DashboardRouter);

Routing - Base Concepts

Routes