Navigate to a URL-Addressable Component

You can navigate to a component that defines the lightning__UrlAddressable target in the component's .js-meta.xml configuration file. lightning__UrlAddressable is supported only in Lightning Experience and the Salesforce mobile app. It's also supported in custom apps, such as in a Lightning console app. This target isn't supported in Experience Builder sites, since it interferes with custom domain and CDN support.

To make the component available for navigation, set the <isExposed> tag to true. The <apiVersion> tag has no impact on the lightning__UrlAddressable target and can be set to an earlier version.

To navigate to the component, use the standard__component page reference type. Include the required attributes and optional state objects.

The standard__component page reference type has the componentName attribute that takes in a 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 namespace of c__, like with c__MyComponent.

A component with the lightning__UrlAddressable target has a URL with the format /lightning/cmp/c__MyComponent?c__mystate=value. You can pass a property value to your URL-addressable component when navigating like this.

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

This example shows a component navToComponent with a button that opens a URL-addressable component. Its .js-meta.xml configuration file includes the lightning__AppPage target only. It assumes that you've added the navToComponent component to an app page using Lightning App Builder.

The component's JavaScript passes in a page reference to the [NavigationMixin.Navigate](pageReference, [replace]) method using the standard__component type.

This example shows a component workspaceOpenTab with a button that opens a URL-addressable component in a new workspace tab. Its .js-meta.xml configuration file includes the lightning__AppPage target only. It assumes that you've added the workspaceOpenTab component to a Lightning console app.

The component's JavaScript calls the openTab() method from lightning/platformWorkspaceApi.

myComponent displays the URL and page reference information that's defined by the workspaceOpenTab component. The myComponent.js-meta.xml configuration file includes the lightning__UrlAddressable target.

The component's JavaScript uses the CurrentPageReference wire adapter to return page reference information. In this example, the URL returns https://MyDomainName.my.salesforce.com/lightning/cmp/c__myComponent?c__mystate=value&uid=_uniqueId_.

In a Lightning console app, navigating to a component displays the component in a new tab. To prevent the app from opening a new tab if the tab with the component is already opened, pass in a uid value to the state object.

See Also

• Navigate to Different Page Types
• Salesforce Console Developer Guide: Methods for Workspace Tabs and Subtabs in Lightning Experience