I have two lightning web components and I have to navigate from one LWC to another LWC on button click.
I tried navigation service to apply the NavigationMixin function in the component’s base class to extends NavigationMixin(LightningElement). but it didn't work.
Can please anyone help me?
Thank you.
You can't (yet).
List of all interesting PageReference types says you're supposed to use standard__component but the target can't be pure LWC. At best it has to be hidden inside an Aura wrapper.
A Lightning component. To make an addressable Lightning web component, embed it in an Aura component that implements the lightning:isUrlAddressable interface.
It's a pain. I suspect that's also reason why we can't make quick actions with LWC yet, they'd have to be wrapped in Aura.
Click the link in the quote, it'll lead you to example how to pass parameters (/lightning/cmp/c__helloTarget?c__firstname=John)
In Salesforce LWC app, you can navigate from one LWC component to another (which is on another tab/apppage) with the following code
myComponent.html
<a href="javascript:void(0);" tabindex="0" onclick={navigateNext}>Click Here</a>
myComponent.js
import { NavigationMixin } from 'lightning/navigation';
import { CurrentPageReference } from 'lightning/navigation';
export default class MyComponent extends NavigationMixin(LightningElement){
@wire(CurrentPageReference) pageRef;
@api tabName = "NextPage";
navigateNext() {
console.log("tabName = ", this.tabName)
this[NavigationMixin.Navigate]
({
type: 'standard__navItemPage',
attributes: {
apiName: this.tabName
}
});
}
}
Please replace the tabName variable with the apppage/tab name you are supposed to navigate.
That's it. You will be navigated to the tabName specified when you click the button in html
You can also go through the official documentation for more : https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_navigate_basic
In LWC Application, We can do it in either of the following ways:
1. Using Container Component
Create a parent LWC component that will be containing both the lwc components and showing one of the components at a time.
On clicking of the button, dispatch a custom event to navigate between the components. On receiving the custom event in the container component, hide the visible component and show another.
2. Making use of LWC routes.
For information on lwc routes follow the below link.
