Is Url Addressable

To enable direct navigation to a Lightning component via URL, add the lightning:isUrlAddressable interface to the component. This interface is used with the lightning:navigation component to navigate from one component to the URL-addressable component. This navigation feature is supported only in Lightning Experience and the Salesforce mobile app.

lightning:isUrlAddressable isn't available in sites created with Experience Cloud, since it interferes with custom domain and CDN support.

The lightning:isUrlAddressable interface extends the lightning:hasPageReference interface. A component that implements lightning:isUrlAddressable then gets access to the page state through the pageReference attribute. The page state is a representation of the current URL query parameters.

lightning:isUrlAddressable enables you to generate a user-friendly URL for a Lightning component with the pattern /cmp/componentName instead of the base-64 encoded URL you get with the deprecated force:navigateToComponent event.

Important: When the target of a navigation action maps to the same component, the routing container might simply update the pageReference attribute value instead of recreating the component. In this scenario, a change handler ensures that your component reacts correctly.

This example shows the markup required to add the lightning:isUrlAddressable interface to a Lightning component to get access to the current page state. c:helloTarget displays a string that's passed in from another component.

Important: Even when using HTTPS, including personal data for URL parameters isn’t safe. See Storing Sensitive Data for details.

In c:helloTarget component's client-side controller, retrieve the attribute values from the page state.

In the component that you want to trigger the navigation, include an instance of the lightning:navigation component. Then include the component to perform the jump to the other component. In this example, a lightning:button component is added to c:hello to trigger the navigation to the URL addressable component.

Define your page reference for the component you’re navigating to. We recommend setting the page reference using an init handler. This example stores the pageReference in an attribute in the component, and is used to navigate later in the click handler.

Clicking the button in c:hello directs you to /lightning/cmp/c__helloTarget?c__id=001XXXXXXXXXXXX, and Hello 001XXXXXXXXXXXX is displayed on the c:helloTarget page.

When building a component that implements lightning:hasPageReference, you probably want to update a parameter on the pageReference while staying on the current page. Use a change handler to listen for page state updates. Updating a parameter also updates the URL, so that some state or data that the page holds can be retained, even when the page refreshes. In Salesforce Lightning Experience, you see this behavior with the filterName attribute on an object list. To make this pageReference change, use the lightning:navigation component.

This example expands the c:helloTarget component to include a text box to enter a new ID and adds a button that switches the page to view a different record ID when clicked. It uses lightning:navigation to update the URL and pageReference, and observes changes to the pageReference so that the helloTarget component knows when the pageReference change has finished.

The c:helloTarget controller binds the id parameter to a component attribute in the init handler, uses the lightning:navigation component to update the id state parameter, and reevaluates the id component attribute when the pageReference changes.