Routing

Setting up routing (navigation) for an Ionic 4/5 app.

Introduction

One of the core Ionic 4/5 features is Routing based on Angular routing and navigation. It is used to build a single-page app with multiple views. Using Routing to load different parts of the app helps logically divide the app and make it more manageable.

Routing is needed to show different content depending on what route is chosen.

Using Routing

When creating a new page you are suggested to create a navigation route for it:

New page with navigation.New page with navigation.

New page with navigation.

Once a page is created, go to Project > Routing to see the newly created routing:

Ionic Routing.Ionic Routing.

Ionic Routing.

It's also simple to add a route manually. On the Routing view:

  1. Enter the route name.
  2. Select the page (where to navigate).
  3. Click Add to add this routing rule.

Make sure a correct Default route is set. The Default route shows the first page that will be shown when the app loads.

🚧

Navigating to a non-existing route will also redirect you to a default screen. Several routes can lead to the same screen but paths must be different.

🚧

Duplicate Paths

Routing should not contain duplicated paths. Unique paths are recommended to ensure that your app works correctly.

When renaming a page, you can choose whether to change the paths of the corresponding routes.

CanActivate Guard

An Ionic route guard helps determine if a particular action can be taken against a route.

To add a new guard, it first needs to be created under Create new > Typescript with selecting the Angular guard type from the dropdown.
This function will return true if the transition is allowed, and false if it is not allowed.
After the guard has been added, it can be selected which will allow routing to the particular app page by default:

📘

Note on Angular Performance Optimization!

Before starting your release build make sure you:

  • use our default export flow (used for creating a guard) for all project interceptors and quards: export let ExportedClass = xxxxxxxxx; (not export { xxxxxxxxx as ExportedClass }; )
  • not only ExportedClass but also the class itself has been exported so that export is added before class description:
    export class xxxxxx implements CanActivate
    or
    export class JwtInterceptor implements HttpInterceptor.

To modify this logic (for example, show the page to the authorized user only, etc.), changes have to be made to the code of the canActivate function. More details can be found here.

How Routing Works

Using the Navigate to page snippet

Navigating to a page is as simple as using the built-in Navigate to page snippet.
You just need to select the Navigate to Page snippet from the snippets list and set its value to an existing route:

Using navigate-to directive.Using navigate-to directive.

Using navigate-to directive.

For the component which is to invoke the navigation, you can use the Routing menu under the component's PROPERTIES tab to select the existing page to be redirected to:

Using the Navigate to page action

It is also possible to apply the Navigate to page action for the needed component's event with setting the Route name and Route params:

Datasources Navigation

Under the DATA tab, navigation can be defined for datasources. To do it, select the service and define its event with the Navigate to page action.
You can also set the value of Route Params to pass some parameters in URL at navigation, for example, this.email.

📘

If several values are passed, they should be separated with commas (param1, param2, ...).

Every route is bound to its own page. Also, several routes can be bound to one page. Depending on a situation, a number of routes can be used in both scenarios: when navigation has some parameters defined or has no parameters.

Working with Tabs Routing

Set the tabbed page as default under Project > Routing:

Under the PROPERTIES tab, for the Tab property of the Tab Button select the page to be navigated to:

If you need to show tab buttons for such navigation, use the Tab Path property of the Tab Button component but this is not required as the path will be created automatically (For example, /profile, /home, /info).

Also, child routes can be added to define nested (multilevel) routings for every page. You can read here for more details.

They are described in JSON with the format shown in a pop-up hint. Please check this link for more explanation.

Using Route Path Template

By default, a route path template looks like screen_name. You can easily change the path by clicking the dropdown list and selecting a new screen. The default path may be changed this way when needed.

You can also manually change the path value, including the default part: