CORE CONCEPTS

Rasengan.js Routing Basics

Rasengan.js supports multi-page application (MPA) routing by default, powered by React Router. This allows you to handle different URLs and render specific components based on the URL, making navigation seamless within your application.

Understanding Routing in Rasengan.js

Routing in Rasengan.js is managed through Routers, Layouts, and Pages:

Router: A collection of pages, optionally grouped under a shared layout.
Layout: A wrapper component for pages, providing a common structure.
Page: A React component displayed when a specific URL is accessed.

Setting Up Routing

To configure routing in Rasengan.js, you need to define a Router, which organizes pages and layouts efficiently.

1. Creating a Router

A Router is a collection of pages that can share a layout. You create one by extending RouterComponent and configuring it using defineRouter.

Example: Defining a Router

src/app/app.router.ts

javascriptimport { RouterComponent, defineRouter } from "rasengan";
 
class AppRouter extends RouterComponent {}
 
export default defineRouter({
  imports: [], // Import other routers
  layout: null, // Assign a layout (optional)
  pages: [] // Add page components
})(AppRouter);

Router Configuration Options

Property	Description	Type	Required
`imports`	Import additional routers	`RouterComponent[]`	No
`layout`	Assign a layout component	`LayoutComponent`	No
`pages`	Define page components	`PageComponent[]`	Yes

2. Creating a Layout

A Layout wraps around multiple pages, providing a consistent structure (e.g., headers, footers). It is optional but recommended.

Example: Defining a Layout

TypeScript

JavaScript

src/app/app.layout.tsx

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

3. Creating a Page

A Page is a React component that is displayed when a user visits a specific route.

Example: Defining a Page

TypeScript

JavaScript

src/app/home.page.tsx

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

Project Structure

Router Configuration