<page-redirect>
The <page-redirect> component triggers programmatic redirection. It is used to handle unknown URLs (404 errors) or to route parent index paths to a default sub-route.
html
1<page-redirect path="/dashboard" type="always"></page-redirect>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
type | "unknown" | "always" | "unknown" | Condition under which redirection triggers. |
path | string | "/" | Destination path (supports parent prefixes like $ and ~). |
title | string | undefined | The document title to set after redirecting. |
payload | object | {} | History state payload. In HTML, provide a JSON-serialized object string. |
Redirection Types
1. unknown (Default)
Redirection triggers only when the current browser path is not matched by any registered route. This is primarily used for defining global or local 404 fallbacks:
html
1<!-- Register valid routes first -->2<page-route path="/">Home</page-route>3<page-route path="/about">About</page-route>4<page-route path="/404">Not Found</page-route>5 6<!-- Redirect any other path to /404 -->7<page-redirect path="/404"></page-redirect>[!IMPORTANT] The order of tags in HTML matters. Make sure to define
<page-redirect>elements after your<page-route>tags so all valid routes are registered first.
2. always
Redirection triggers immediately when the parent route is matched exactly. This is helpful for assigning a default view or tab when visiting a parent layout:
html
1<page-route path="/projects/:projectId" exact="false">2 <h2>Project Dashboard</h2>3 4 <div class="sub-tabs">5 <page-link path="$/overview">Overview</page-link>6 <page-link path="$/analytics">Analytics</page-link>7 </div>8 9 <!-- Sub-Routes -->10 <page-route path="/overview">Overview Content</page-route>11 <page-route path="/analytics">Analytics Content</page-route>12 13 <!-- Redirects /projects/:projectId directly to /projects/:projectId/overview -->14 <page-redirect path="$/overview" type="always"></page-redirect>15</page-route>Scoped Redirection
Because <page-redirect> is aware of its placement in the DOM tree:
- Placing it inside a parent
<page-route>means it will only handle redirections for child paths within that route. - Unrelated root-level paths will not trigger the child redirect.
html
1<page-route path="/admin" exact="false">2 <h2>Admin Dashboard</h2>3 4 <page-route path="/settings">Settings</page-route>5 6 <!-- Redirects /admin/invalid-subpath to /admin/settings -->7 <page-redirect path="$/settings"></page-redirect>8</page-route>