Docs
Core Concepts
Routing
Base Concepts

Routing Base Concepts

Rasengan.js supports mpa (multi-page application) routing by default and it's based on top of React Router (opens in a new tab).

Routing is a way to handle different URLs and render different components based on the URL. It's a way to navigate between different pages in a web application. Rasengan.js handles it through a simple configuration.

Routing Configuration

To configure the routing in Rasengan.js you need to create a Router, which is a collection of Pages.

Basically, Routers are way to group Pages together under a common Layout. Doing it like this, all pages will share the same layout and you can define a Layout for each Router.

Router

A Router is a collection of Pages and to create one, you have to create a class that extends RouterComponent and then use the defineRouter function to define the Router's property.

RouterComponent

RouterComponent is a class component used to create a Router.

defineRouter

defineRouter is a function provided by Rasengan.js to configure a Router with a configuration option object.

PropertyDescriptionType
importimport other routersRouterComponent[]optional
layoutset a layoutLayoutComponentoptional
pageslist of pagesPageComponent[]required

Layout

A Layout is a component that will be used to wrap the Pages and should be added to the Router configuration.

Defining a Layout is optional, but it's a good practice to have one, so you can have a common structure for all pages.

To create a Layout you have to define a function that returns a JSX element. Also, you have to use the <Outlet /> component provided by Rasengan.js to render the Pages inside the Layout, and after you can define the base URL path that all your pages will use directly under the function.

Example

Page

A Page is a component that will be rendered when the URL matches its path and should be added to the Router configuration.

To create a Page you have to define a function that returns a JSX element. After, you have to set the path, and some metadata like title, description and other.

Example

Next Steps

Defining Routes
Setting Layouts
Linking and Navigating
Error Handling
Redirecting
Project Organization
Dynamic Routes
Logo Image