import Props from '@ionic-internal/component-api/v8/route-redirect/props.md'; import Events from '@ionic-internal/component-api/v8/route-redirect/events.md'; import Methods from '@ionic-internal/component-api/v8/route-redirect/methods.md'; import Parts from '@ionic-internal/component-api/v8/route-redirect/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/route-redirect/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/route-redirect/slots.md';

import EncapsulationPill from '@components/page/api/EncapsulationPill';

A route redirect can only be used with an ion-router as a direct child of it.

:::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. :::

The route redirect has two configurable properties:

• from
• to

It redirects "from" a URL "to" another URL. When the defined ion-route-redirect rule matches, the router will redirect from the path specified in the from property to the path in the to property. In order for a redirect to occur the from path needs to be an exact match to the navigated URL.

An arbitrary number of redirect routes can be defined inside an ion-router, but only one can match.

A route redirect will never call another redirect after its own redirect, since this could lead to infinite loops.

Take the following two redirects:

<ion-router>
  <ion-route-redirect from="/admin" to="/login"></ion-route-redirect>
  <ion-route-redirect from="/login" to="/admin"></ion-route-redirect>
</ion-router>

If the user navigates to /admin the router will redirect to /login and stop there. It will never evaluate more than one redirect.

<!-- Redirects when the user navigates to `/admin` but
will NOT redirect if the user navigates to `/admin/posts` -->
<ion-route-redirect from="/admin" to="/login"></ion-route-redirect>

<!-- By adding the wilcard character (*), the redirect will match
any subpath of admin -->
<ion-route-redirect from="/admin/*" to="/login"></ion-route-redirect>

Redirection routes can work as guards to prevent users from navigating to certain areas of an application based on a given condition, such as if the user is authenticated or not.

A route redirect can be added and removed dynamically to redirect (or guard) some routes from being accessed. In the following example, all urls * will be redirected to the /login url if isLoggedIn is false.

const isLoggedIn = false;

const router = document.querySelector('ion-router');
const routeRedirect = document.createElement('ion-route-redirect');
routeRedirect.setAttribute('from', '*');
routeRedirect.setAttribute('to', '/login');

if (!isLoggedIn) {
  router.appendChild(routeRedirect);
}

Alternatively, the value of to can be modified based on a condition. In the following example, the route redirect will check if the user is logged in and redirect to the /login url if not.

<ion-route-redirect id="tutorialRedirect" from="*"></ion-route-redirect>

const isLoggedIn = false;
const routeRedirect = document.querySelector('#tutorialRedirect');

routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login');