ion-route-redirect

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.

Multiple Route Redirects

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.

Usage

<!-- 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>

Route Redirects as Guards

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');

Properties

from

Description	リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その "from" URLです。このプロパティを適用するには、ナビゲートされるURLと完全に一致する必要があります。 この値で指定されるパスは、最初の / スラッシュが指定されていない場合でも、常に絶対パスとなります。
Attribute	from
Type	string
Default	undefined

to

Description	リダイレクトルートは、あるURLから別のURLへリダイレクトさせるルートです。このプロパティは、その "to "URLです。定義された ion-route-redirect ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトします。 このプロパティの値は、常に ion-router で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできません。 これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。 このプロパティが指定されていない場合、または値が undefined の場合、たとえ "from" の値が一致しても、リダイレクトルート全体は noop となります。
Attribute	to
Type	null ｜ string ｜ undefined
Default	undefined

Events

Name	Description
ionRouteRedirectChanged	このルールの値がDOMから追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。 ion-router`は、ルータルールの内部レジストリを更新するために、このイベントを捕捉します。

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

No slots available for this component.