4. Building App - Routing and Navigation

Learn how to set 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.

🚧

Duplicate Paths

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.

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 paths of the corresponding routes.

CanActivate Guard

An Ionic 4/5 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:

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 Ionic Back Button

Simple routing to the previously opened page can be added by adding an Ionic Back Button to the Toolbar Buttons area.
This is done in two steps:

  1. Drag and drop a Button to the Toolbar Buttons area.
  2. Define its Component Type property as Ionic Back Button:

Using Ionic Menu Button

To be able to use the menu functionality for your app:

  1. Set the Menu property of the app page (which is the app indexScreen) to True:
  1. Switch to the needed page and drag and drop a Button to the Toolbar Buttons area.
  2. Define its Component Type property as Ionic Menu Button:

📘

You can check here for more details to learn how our Ionic 5 Components Sample App with the menu was created.

Using Navigate to page Snippet

Navigating to a page is as simple as using the built-in the 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 panel to select the existing page to be redirected to:

Using 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 panel, 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 the 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 panel, 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:

UI Components' Routing

Some Appery.io UI components, for example, Button or List Item feature the Routing property which can be used for redirecting to specific app pages: if you unfold the Routing folder for the Button component, you will see that the routing path from it can be set to the Screen1 (Route Name = Screen1):

This means that if this particular button is selected (clicked) in an app, you will be redirected to the app Screen1 page.

📘

You can check here for more details to learn how our Ionic 5 Components Sample App with the list menu routing to different app pages was created.

You can customize this behavior by selecting another Route Name value. Note as well, that when folded, the Routing value (routed) indicates that some routing path is defined for this component.

🚧

Please be informed that if you are building your app from scratch and have not defined any custom page yet, the Route Name can be set to the only page available at the moment: Screen1.