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.