Skip to main content

Route

Route | API Route Component for WebJET Elements shadow

The Route component renders the selected component when the value in its url property matches the URL in the browser.

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;
}

When to use​

Use wje-route when users need to understand location, move between views, or traverse hierarchy.

When not to use​

Do not combine multiple competing navigation patterns for the same user flow.

Accessibility​

Ensure visible active/selected states, predictable tab order, and clear control naming.

Best Practices​

  • Keep URL state and UI navigation state synchronized.
  • Use consistent labels across menu, breadcrumbs, and tabs.
  • Add context for deep structures (breadcrumbs, headings, icon cues).

Attributes and Properties​

No properties available for this component.

Events​

No events available for this component.

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.

Content