NavigationMixin

You can use NavigationMixin instead of the navigate() and generateUrl() APIs. Both options offer the same functionality, but only NavigationMixin is compatible with Lightning Experience. If you're writing a component for use in both LWR and Lightning Experience, choose NavigationMixin.

Syntax

import { LightningElement } from "lwc";
import { NavigationMixin } from "lightning/navigation";

const pageRef = {
  type: "standard__recordPage",
  attributes: {
    recordId: "001xx000003DGg0AAG",
    objectApiName: "Account",
    actionName: "view",
  },
};

export default class Example extends NavigationMixin(LightningElement) {
  // Navigate to a page reference
  navPageRef() {
    this[NavigationMixin.Navigate](pageRef);
  }
  // Generate a URL for a page reference
  getUrl() {
    this[NavigationMixin.GenerateUrl](pageRef).then((url) => console.log(url));
  }
}

See Also

• Component Reference (Lightning Web Components): lightning-navigation
• Understand Client-Side Routing: Lightning Navigation