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.
| Property | Description | Type | |
|---|---|---|---|
import | import other routers | RouterComponent[] | optional |
layout | set a layout | LayoutComponent | optional |
pages | list of pages | PageComponent[] | 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.
