NavigationMixin and Page References

A mixin is a function that takes a base class and returns a new, extended class with added capability — a way to add a specific trait (like navigation) without a traditional, rigid inheritance chain (Module 4 covered plain JavaScript classes; a mixin is a pattern built on top of that). NavigationMixin is Salesforce's built-in mixin for adding page-navigation capability to any component.

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

export default class AccountLink extends NavigationMixin(LightningElement) {
    // this class now has navigation capability
}

Instead of extends LightningElement, the class extends NavigationMixin(LightningElement) — the mixin wraps the base class and returns an enhanced one.

const pageReference = {
    type: 'standard__recordPage',
    attributes: {
        recordId: this.accountId,
        objectApiName: 'Account',
        actionName: 'view',
    },
};

A PageReference is a plain object describing where to go — a type (the kind of page) plus attributes (and sometimes state) specific to that type. Lesson 2 covers the exact shapes for records, objects, and list views in depth.

handleViewAccount() {
    this[NavigationMixin.Navigate](pageReference);
}

NavigationMixin.Navigate is a special, imported symbol used as a computed property name to call the navigation method the mixin added to the class — an unusual-looking but standard syntax specific to this API. This actually performs the navigation using the PageReference built above.