1

I'm trying to get the NavigationMixin plugin to work in my Lightning Web Component. I'm following the instructions listed here but its not working, even though I'm copy-pasting the code from the example section. Could it be failing because I'm in a scratch org, or is there some kind of setting I need to change to enable it?

One last thought about the cause, could it be that I have it contained in an Aura component inside a Visualforce page? I'm doing this so it can exist in a list view, so I'd prefer if I didn't need to send an event back up the layers.

EDIT: Here's the exact code I'm copying. The URL seems to always be set to a Javascript function, and the handleClick function is ran but does nothing.

<!-- navigationLinkExample.html -->
<template>
    <div>
        <a href={url} onclick={handleClick}>Account Home</a>
    </div>
</template>
// navigationLinkExample.js
import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavigationLinkExample extends NavigationMixin(LightningElement) {

    url;

    connectedCallback() {
        // Store the PageReference in a variable to use in handleClick.
        // This is a plain Javascript object that conforms to the
        // PageReference type by including 'type' and 'attributes' properties.
        // The 'state' property is optional.
        this.accountHomePageRef = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'home'
            }
        };
        this[NavigationMixin.GenerateUrl](this.accountHomePageRef)
            .then(url => this.url = url);
    }

    handleClick(evt) {
        // Stop the event's default behavior.
        // Stop the event from bubbling up in the DOM.
        evt.preventDefault();
        evt.stopPropagation();
        // Navigate to the Account Home page.
        this[NavigationMixin.Navigate](this.accountHomePageRef);
    }
}
1
  • 2
    'accountHomePageRef' variable is not declared in the code. Jun 9, 2021 at 3:53

1 Answer 1

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

export default class NavigationLinkExample extends NavigationMixin(LightningElement) {

    handleClick() {
        this[NavigationMixin.Navigate]({
            "type": "standard__objectPage",
            "attributes": {
                "objectApiName": "Account",
                "actionName": "home"
            }
        });
    }
}
1
  • Try this JS code. It should work
    – olgaK
    Jun 10, 2021 at 20:54

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .