Seamlessly Navigate to URL Addressable LWCs with Parameters in Salesforce

Hello folks, Navigating to URL addressable Lightning Web Components (LWCs) with parameters in Salesforce has become a powerful feature, especially with the enhancements in recent releases. This feature allows developers to navigate one LWC to another LWC with parameters more seamlessly.

To create a URL addressable component, we no need have to embed your Lightning web component in an Aura component.

Also, check this: Salesforce Winter’25 Release Summary Points

Key Highlights :

1. Enhanced User Experience: Users can bookmark and share specific states of your application.
2. Simplified Navigation: Directly navigate to components without embedding them in Aura components.
3. Parameter Passing: Easily pass data between components via URL parameters.
4. Independent for Navigation: No need have to embed your LWC in an Aura component.
5. Target: Set target in xml file <target>lightning__UrlAddressable</target>

Code :

sourceLWC.HTML:

<template>
    <lightning-card variant="Narrow" title="Source LWC Component" icon-name="standard:recipe">
        <div class="slds-p-horizontal_small">
            <lightning-input type="text" variant="standard" name="name" label="Name" onchange={handleNameChange}></lightning-input>
            <lightning-input type="email" variant="standard" name="email" label="Email" onchange={handleEmailChange}></lightning-input>
            <br/>
            <lightning-button variant="brand" label="Navigate to another LWC" title="Navigate to another LWC"
                onclick={navigateToTargetLWC} class="slds-m-left_x-small slds-m-top_medium"></lightning-button>
        </div>
    </lightning-card>
</template>

sourceLWC.JS:

import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class SourceLWC extends NavigationMixin(LightningElement) {
    Name;
    Email;

    handleNameChange(event){
        this.Name = event.detail.value;
    }

    handleEmailChange(event){
        this.Email = event.detail.value;
    }

    navigateToTargetLWC() {

        this[NavigationMixin.Navigate]({
            // Pass in pageReference
            type: 'standard__component',
            attributes: {
                componentName: 'c__targetLWC',
            },
            state: {
                c__name: this.Name,
                c__email: this.Email,
            }
        });
    }
}

sourceLWC.JS-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>60.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

targetLWC.HTML:

<template>
    <lightning-card variant="Narrow" title="LWC Navigation Target (The URL Addressable LWC)" icon-name="standard:recipe">
        <div class="slds-p-horizontal_small">
            <h2>
                Name : {name} <br/>
                Email : {email} <br/>
            </h2>
        </div>
    </lightning-card>
</template>

targetLWC.JS:

import { LightningElement, wire, api } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';

export default class TargetLWC extends LightningElement {
    name;
    email;

    @wire(CurrentPageReference)
    getPageReferenceParameters(currentPageReference) {
        if (currentPageReference) {
            console.log(currentPageReference);
            let states = currentPageReference.state;
            this.name = states.c__name;
            this.email = states.c__email;
        }
    }
}

targetLWC.JS-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>61.0</apiVersion>
	<isExposed>true</isExposed>
    <targets>
        <target>lightning__UrlAddressable</target>
    </targets>
</LightningComponentBundle>

Output :

Reference :

1. Navigate to a URL-Addressable Component
2. Navigate to a URL-Addressable Lightning Web Component