NavigationContext

Gets a reference to a Lightning web component's navigation context (its closest ancestor router container) for use with the generateUrl() and navigate() APIs.

Properties

None

Syntax

import { LightningElement, wire } from "lwc";
import { NavigationContext } from "lwr/navigation";

export default class Example extends LightningElement {
  @wire(NavigationContext)
  property;
}

Returns

• A ContextId, which is an opaque ID for the parent router container nearest to the component.

Example

import { LightningElement, wire } from 'lwc';
import { NavigationContext, navigate } from 'lwr/navigation';

export default class HomeLink extends LightningElement {
    // Use the NavigationContext wire to obtain a Context Id value and assign it to the navContext property
    @wire(NavigationContext)
    navContext;

    navigateHome(event) {
        // Navigate when the button is clicked
        event.preventDefault();
        // The navigate() API uses the ContextId value
        if (this.navContext) {
            navigate(this.navContext, {
                type: 'home',
                attributes: { format: 'list' },
                state: { dark-mode: 'true' },
            });
        }
    }
}

<template>
  <button onclick="{navigateHome}">Home</button>
</template>

See Also

• Simple Routing Example: Navigate