Defining Routes

In Rasengan.js, each page is defined as a PageComponent. A page consists of a function returning a JSX element and includes metadata such as title, description, and keywords to improve SEO and page accessibility.

To define a page, create a new .page.tsx or .page.jsx file inside the app folder. Then, specify the page’s path and metadata.

Let's assume you are creating an About page accessible at /about. Below is how you can define it:

tsximport { PageComponent } from "rasengan";
 
const About: PageComponent = () => {
  return (
    <div>About us</div>
  );
};
 
About.path = "/about";
About.metadata = {
  title: "About Us",
  description: "Learn more about our company",
};
 
export default About;

To attach a page to a router, import the page and attach it to the router.

tsximport { RouterComponent, defineRouter } from "rasengan";
import About from "@/app/about.page";
 
class AppRouter extends RouterComponent {}
 
export default defineRouter({
  pages: [About],
  //...
})(AppRouter);

Now when you visit /about, you will see the About page.

Metadata helps search engines and social media platforms understand your page content.