Setting Layout
Before starting reading this documentation, make sure you have read the Routing Base Concepts guide.
What is a Layout?
A Layout is a component that wraps a set of Pages and provides a common structure for them. It is useful to create a common structure for a set of pages, like a header, footer, or a sidebar.
How to create a Layout?
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
Let's suppose you have a Layout component that set the base URL path to /admin, and you want to create a page which URL is /admin/dashboard. You have to create a Page component and set its path to /dashboard
because the Layout component already set the base URL to /admin.
Now let's see how to create a Layout:
Outlet component is a special component that will render the Page
component that matches the current URL.
How to use a Layout?
To use a Layout you have to set the Layout property in the Router in which you want to use it. As the Router is the place
where you group all your Pages, you just have to set the Layout there and all the Pages that are children of the Router will use the Layout.
As you can see, the AppLayout is set in the Router and the Home page is a child of the Router, so it will use the AppLayout.
In a Rasengan.js application, you can have multiple Layouts and use them in different Routers to create different structures for different parts of your application.
Example
Create a Layout
Let's create a Layout that will be used in the /admin part of the application.
Create a Page
Now let's create another Page called Dashboard that will use the AdminLayout and will respond to the URL /admin/dashboard.
Create a Router and Use the AdminLayout and Dashboard Page
Then we have to create a Router that will use the AdminLayout and the Dashboard page.
Import the AdminRouter into the AppRouter
Finally we have to set the AdminRouter in the main Router of the application.
Launch the application with npm run dev and access the URL http://localhost:5320/admin/dashboard (opens in a new tab) to see the AdminLayout and the Dashboard page.
To define many Routers in the same application, you have to set the import
property in the defineRouter function to import the other Routers that you
want to use.
Note that, the AdminRouter is imported in the AppRouter, but you can also
import other Routers in the AdminRouter to create a more complex
structure, like a Layout for the /admin/auth part of the application to
handle the authentication.
