Skip to main content

Router

shadow

The Router component is a tool for navigating within web applications. This component supports complex navigation scenarios and lazy-load, enhancing application performance and user experience. It uses the other components Router Link, Router Outlet, and Route to do this.

In addition, it integrates seamlessly with WebJET Elements components, making it easy to implement navigation in your project.

The wje-router component is tasked with managing all interactions with the browser history and grouping updates through the event system, and should only be found once in the application structure.

wje-router is just a URL coordinator for the navigation outlets of ionic: wj-nav, wj-tabs, and wje-router-outlet.

That means the wje-router never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells wj-nav, wj-tabs, and wje-router-outlet what and when to "show" based on the browser's URL.

In order to configure this relationship between components (to load/select) and URLs, wje-router uses a declarative syntax using JSX/HTML to define a tree of routes.

Basic usage​

The sample shows the smallest functional router wiring, i.e. the transition between views through its default configuration.

Interfaces​

RouterEventDetail​

interface RouterEventDetail {
  from: string | null;
  redirectedFrom: string | null;
  to: string;
}

RouterCustomEvent​

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with WebJET events emitted from this component.

interface RouterCustomEvent extends CustomEvent {
  detail: RouterEventDetail;
  target: HTMLElement;
}

Use​

<wje-router>
  <wje-route component="page-tabs">
    <wje-route url="/schedule" component="tab-schedule">
      <wje-route component="page-schedule"></wje-route>
      <wje-route url="/session/:sessionId" component="page-session"></wje-route>
    </wje-route>

    <wje-route url="/speakers" component="tab-speaker">
      <wje-route component="page-speaker-list"></wje-route>
      <wje-route url="/session/:sessionId" component="page-session"></wje-route>
      <wje-route url="/:speakerId" component="page-speaker-detail"></wje-route>
    </wje-route>

    <wje-route url="/map" component="page-map"></wje-route>
    <wje-route url="/about" component="page-about"></wje-route>
  </wje-route>

  <wje-route url="/tutorial" component="page-tutorial"></wje-route>
  <wje-route url="/login" component="page-login"></wje-route>
  <wje-route url="/account" component="page-account"></wje-route>
  <wje-route url="/signup" component="page-signup"></wje-route>
  <wje-route url="/support" component="page-support"></wje-route>
</wje-router>

When to use​

Use wje-router when the user needs to navigate the application or transition between states/screens.

When not to use​

Do not use multiple parallel navigation patterns that compete with each other.

Accessibility​

Provide clear active/selected states, predictable tab order, and naming of controls.

  • Keep the URL and UI state in sync to make the navigation reproducible.
  • Use consistent terminology for items across menus, breadcrumb and tabs.
  • For deep structures, add auxiliary context (breadcrumb, title, icons).

Attributes and properties​

Pre tento komponent nie sú dostupné žiadne vlastnosti.

Events​

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods​

parseElement​

PopisSpustí metódu parseElement na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra(element: Element) => object

CSS shadow parts​

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS custom variables​

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Slots​

Pre tento komponent nie sú dostupné žiadne sloty.

Content