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);
}
}