Define routes for navigation

Routes enable navigation between pages in an application. Each route represents both the content displayed and the URL used to access that content.

This tutorial explains the different parts of a route and how to define routes in an application.

Copy link to this section

Create a new route

Routes exist as metadata, so ensure that the {package}/metadata/UiSdlRoute directory exists:

examplePackage
├── examplePackage.c3pkg.json
├── metadata
│   └── UiSdlRoute
│       └── UiSdlRoute.csv
└── ui/c3/meta

Add two new routes to the {package}/metadata/UiSdlRoute/UiSdlRoute.csv file:

targetModuleName,targetPageName,name,urlPath
examplePackage,PageLayout,/,/
examplePackage,PageLayout,home,/home
examplePackage,NewPageLayout,example/path,example/path

With these three routes and a deployed application, users can access https://{environment}, https://{environment}/home, or https://{environment}/example/path.

Each route uses four parts of the UiSdlRoute definition:

1. targetModuleName specifies the first half of the UiSdlComponent ID that directs the component.
2. targetPageName specifies the page component's ID. This determines the content for the route.
3. name serves as a unique identifier for the route. Ensure that the name remains unique. Typically, name matches urlPath.
4. urlPath specifies the relative path from the base application URL to the page. Use a relative path, meaning it should not start with / unless the path itself is /. For example, example/path translates to https://{environment}/example/path.

This setup allows defining routes for an application.