In the Summer '24 release Salesforce gives us ability to make our Lightning Web Components URL Addressable and navigate to it without using Aura Components.
Before this the only way to navigate to a LWC was by embedding it inside an Aura Component. I had written a blog on it if you wish to learn more about the previous methods please use below link.
https://www.salesforcebolt.com/2022/05/navigate-from-lwc-to-lwc-with-and-without-aura.html
To generate a URL for your Lightning web component and make it available via a URL, include the lightning__UrlAddressable target in your component’s .js-meta.xml configuration file. Set the <isExposed> tag to true. The <apiVersion> tag has no impact on this feature and can be set to an earlier or later version.
To navigate to the custom component, use the lightning/navigation module with the standard__component page reference type.
Checkout example below:
navigateFromLWC.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <template> <lightning-card title="Navigate to a URL-Addressable Lightning Web Component" class="slds-card__body_inner" icon-name="standard:search" > <div class="slds-box"> <lightning-button label="Navigate to LWC URL" onclick={navigateToLWCURL} ></lightning-button> </div> </lightning-card> </template> |
navigateFromLWC.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import { LightningElement } from "lwc"; import { NavigationMixin } from "lightning/navigation"; export default class NavigateFromLWC extends NavigationMixin(LightningElement) { navigateToLWCURL() { this[NavigationMixin.Navigate]({ // Pass in pageReference type: 'standard__component', attributes: { componentName: 'c__destination', }, state: { c__source: 'navigateFromLWC.js', }, }); } } |
destination.html
1 2 3 4 5 6 7 8 9 10 11 | <template> <lightning-card title="Navigate to a URL-Addressable Lightning Web Component" class="slds-card__body_inner" icon-name="standard:search" > <div class="slds-box"> <b>I am the target! I am the source {sourceValue}</b> </div> </lightning-card> </template> |
destination.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { LightningElement, wire, api } from 'lwc'; import { CurrentPageReference } from 'lightning/navigation'; export default class Destination extends LightningElement { @wire(CurrentPageReference) currentPageRef; @api sourceValue; get sourceValue() { return this.currentPageRef.state.c__source; } } |
destination.js-meta.xml
1 2 3 4 5 6 7 8 | <?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>59.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__UrlAddressable</target> </targets> </LightningComponentBundle> |
Output
0 Comments