---
schema_version: "1"
id: 6414693e58081c17164f38b5417b131067deca3fe69eef8273fa6bc0616ae4f8
title: Is Url Addressable
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/aura/components/lightning/isUrlAddressable/aura-is-url-addressable.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/aura-is-url-addressable.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 93419a600703107feca61f9bfe1ec4e84041e75fd9a1586ba4c1ffb5c58c1c60
products:
- Lightning Component Reference
---
# Is Url Addressable
**`lightning:isUrlAddressable`**
Enables a component to be directly navigated to through a URL.
**For Use In**
Lightning Experience, Salesforce Mobile App
::::::tabset{tabs='[ "Develop", "Specifications"]'}
:::::tab
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](https://developer.salesforce.com/docs/atlas.en-us.secure_coding_guide.meta/secure_coding_guide/secure_coding_storing_sensitive_data.htm) for details.
```html
Hello {!v.id}.
```
In `c:helloTarget` component's client-side controller, retrieve the attribute values from the page state.
```javascript
({
onPageReferenceChange: function (cmp, evt, helper) {
var myPageRef = cmp.get("v.pageReference");
var id = myPageRef.state.c__id;
cmp.set("v.id", id);
},
});
```
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.
```html
```
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.
```javascript
({
init: function (component, event, helper) {
var pageReference = {
type: "standard__component",
attributes: {
componentName: "c__helloTarget",
},
state: {
c__id: "001XXXXXXXXXXXX",
},
};
component.set("v.pageReference", pageReference);
},
handleClick: function (component, event, helper) {
var navService = component.find("navService");
var pageReference = component.get("v.pageReference");
event.preventDefault();
navService.navigate(pageReference);
},
});
```
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.
## Updating the Page Reference
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.
```html
Hello {!v.id}.
```
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.
```javascript
({
onPageReferenceChange: function (cmp, event, helper) {
var myPageRef = cmp.get("v.pageReference");
var id = myPageRef.state.c__id;
cmp.set("v.id", id);
},
updateId: function (cmp, event, helper) {
var idInput = cmp.find("idInput");
var newId = idInput.get("v.value");
var myPageRef = cmp.get("v.pageReference");
var newState = Object.assign({}, myPageRef.state, { c__id: newId });
cmp.find("navService").navigate({
type: myPageRef.type,
attributes: myPageRef.attributes,
state: newState,
});
},
});
```
:::::
:::::tab
:::::
::::::