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.

Rasengan.js introduces file-based routing to make it easier to manage routes. That means you have actually two ways to manage routes:

• Programmatic or Config-based routing: This is the default way to manage routes. It is the way to manage routes using code, you have to define routes manually.
• File-based routing: This is the second way to manage routes. It is based on the file structure of your application, routes are automatically generated based on the file structure.

The whole documentation will follow the Config-based routing way.

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.

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

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

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);

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

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

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

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