Skip to main content

ion-route

none

Contents

The route component takes a component and renders it when the Browser URL matches the url property.

note

Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use ion-router-outlet and the Angular router.

Navigation Hooks#

Navigation hooks can be used to perform tasks or act as navigation guards. Hooks are used by providing functions to the beforeEnter and beforeLeave properties on each ion-route. Returning true allows navigation to proceed, while returning false causes it to be cancelled. Returning an object of type NavigationHookOptions allows you to redirect navigation to another page.

Interfaces#

interface NavigationHookOptions {  /**   * A valid path to redirect navigation to.   */  redirect: string;}

Usage#

<ion-router>  <ion-route url="/home" component="page-home"></ion-route>  <ion-route url="/dashboard" component="page-dashboard"></ion-route>  <ion-route url="/new-message" component="page-new-message"></ion-route>  <ion-route url="/login" component="page-login"></ion-route></ion-router>
const dashboardPage = document.querySelector('ion-route[url="/dashboard"]');dashboardPage.beforeEnter = isLoggedInGuard;
const newMessagePage = document.querySelector('ion-route[url="/dashboard"]');newMessagePage.beforeLeave = hasUnsavedDataGuard;
const isLoggedInGuard = async () => {  const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation    if (isLoggedIn) {    return true;  } else {    return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page  }}
const hasUnsavedDataGuard = async () => {  const hasUnsavedData = await checkData(); // Replace this with actual validation    if (hasUnsavedData) {    return await confirmDiscardChanges();  } else {    return true;  }}
const confirmDiscardChanges = async () => {  const alert = document.createElement('ion-alert');  alert.header = 'Discard Unsaved Changes?';  alert.message = 'Are you sure you want to leave? Any unsaved changed will be lost.';  alert.buttons = [    {      text: 'Cancel',      role: 'Cancel',    },    {      text: 'Discard',      role: 'destructive',    }  ];    document.body.appendChild(alert);    await alert.present();    const { role } = await alert.onDidDismiss();    return (role === 'Cancel') ? false : true;}

Properties#

beforeEnter#

DescriptionA navigation hook that is fired when the route tries to enter.
Returning true allows the navigation to proceed, while returning
false causes it to be cancelled. Returning a NavigationHookOptions
object causes the router to redirect to the path specified.
Attributeundefined
Type(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined
Defaultundefined

beforeLeave#

DescriptionA navigation hook that is fired when the route tries to leave.
Returning true allows the navigation to proceed, while returning
false causes it to be cancelled. Returning a NavigationHookOptions
object causes the router to redirect to the path specified.
Attributeundefined
Type(() => NavigationHookResult | Promise<NavigationHookResult>) | undefined
Defaultundefined

component#

DescriptionName of the component to load/select in the navigation outlet (ion-tabs, ion-nav)
when the route matches.

The value of this property is not always the tagname of the component to load,
in ion-tabs it actually refers to the name of the ion-tab to select.
Attributecomponent
Typestring
Defaultundefined

componentProps#

DescriptionA key value { 'red': true, 'blue': 'white'} containing props that should be passed
to the defined component when rendered.
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

url#

DescriptionRelative path that needs to match in order for this route to apply.

Accepts paths similar to expressjs so that you can define parameters
in the url /foo/:bar where bar would be available in incoming props.
Attributeurl
Typestring
Default''

Events#

NameDescription
ionRouteDataChangedUsed internally by ion-router to know when this route did change.