Defining Routes
Before starting reading this documentation, make sure you have read the Routing Base Concepts guide.
Rasengan.js uses a declarative approach to define routes. As mentioned in the Routing Base Concepts guide,
you have to define a Router and a Page to create a route.
Create a Page
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.
Let's assume that you have a Home page that should be accessible at the / path. You can create a home.page file in the app folder and define the Home page as follows:
Create a Router
A Rasengan.js application can have multiple routers, but only one can be the
default router. The default router is the one that will be used to render the
application and it should be defined in the app.router file in the root of
the app folder.
Note that, here we are using the Home Page that we defined in the previous section. Also, we haven't defined any Layout for this Router, so it will use the default Layout predefined by Rasengan.js responding to the path /.
Learn more about the defineRouter function in the API
Reference guide.
Use the Router
In order to have your routing system working, you have to use the Router component in your application. To do that, you have to import the AppRouter into your App component in the main.tsx file.
import { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";
export default function App({ Component, children }: AppProps) {
return <Component router={AppRouter}>{children}</Component>;
}The App component is a special component that is used to render the application. Make sure to import the AppProps type from rasengan and use it as the type of the App component props.
Now you can run your application and access the / path to see the Home page being rendered.
Then open your browser and access the http://localhost:5320 (opens in a new tab) URL to see the Home page being rendered.
