Setup a New Route

A guide to setup a new route for your app

As mentioned in the topic "Understanding Routes", you can easily define your routes inside the src/app/routes/index.js file.

But to make sure that you take the full advantage of the layout system of Jumbo, we recommend you to define your route in the following manner with the use of <Page /> component.

{
    path: "/dashboards/listing",
    element: <Page component={ListingDashboard}/>,
}

When you define a route like this, it ensures that whenever you access this route, the ListingDashboard component will be loaded with the default layout set inside the src/app/config/main.js with the config property "defaultLayout". In Jumbo, we have kept LAYOUT_NAMES.VERTICAL_DEFAULT as the default layout.

But the real power of this Page component is, the ability to set the desired layout for that particular route. For example, while defining the login page route, you want LAYOUT_NAMES.SOLO_PAGE layout to be loaded. Then you can define the route in following way:

{
    path: "/dashboards/listing",
    element: <Page component={Login} layout="solo-page" />,
}

That covers everything about the routes setup in Jumbo.

Now, regarding the structure of the route object to be added into this array, you can follow the same structure as mentioned on React Router v6 documentation here.