How to Navigate to URL Addressable Lightning Web Components in Salesforce.

Introduction

In Salesforce, Lightning Web Components (LWCs) have become the standard for building modern, responsive user interfaces. One of the powerful features of LWCs is the ability to make them URL addressable, which means users can navigate directly to a specific component via a URL. This blog will guide you through the process of making an LWC URL addressable and how to handle navigation to such components.

1. What Are URL Addressable Lightning Web Components?

Start by explaining what URL addressable LWCs are. These components can be accessed directly via a URL, making them great for use cases where you want to allow users to bookmark a component, share a link to it, or navigate to it from another part of your Salesforce app.

2. Why Make an LWC URL Addressable?

Discuss the benefits of making an LWC URL addressable. This could include improved user experience, easier navigation, and the ability to deep link into specific parts of your application.

How: 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.

<!-- myComponent.js-meta.xml --> <?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>

To navigate to the custom component, use the lightning/navigation module with the standard__component page reference type.

// navToComponentWithState.js import { LightningElement } from 'lwc'; import { NavigationMixin } from 'lightning/navigation'; export default class NavToComponentWithState extends NavigationMixin(LightningElement) { navigateToComponent() { this[NavigationMixin.Navigate]({ // Pass in pageReference type: 'standard__component', attributes: { componentName: 'c__myComponent', }, state: { c__propertyValue: '2000', }, }); } }

The standard__component page reference type has this attribute.

componentName—The Lightning web component name in the format namespace__componentName.

You can pass any key and value in the state object. The key must include a namespace, and the value must be a string. If you don’t have a registered namespace, add the default c__ namespace.

In your URL addressable component, myComponent, use a getter to return the property value from the state object.

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

export default class MyComponent extends LightningElement {
    @wire(CurrentPageReference)
    currentPageRef;

    @api propertyValue;

    get propertyValue() {
        return this.currentPageRef.state.c__propertyValue;
    }
}

A component with the lightning__UrlAddressable target has a URL with the format /lightning/cmp/c__MyComponent?c__mystate=value.

Conclusion

By following these steps, you can navigate to a URL-addressable Lightning Web Component either programmatically or directly via a URL. This feature is particularly useful for creating dynamic, navigable interfaces within Salesforce.