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.
1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3 <apiVersion>61.0</apiVersion>
4 <isExposed>true</isExposed>
5 <targets>
6 <target>lightning__UrlAddressable</target>
7 </targets>
8</LightningComponentBundle>To navigate to the component, use the standard__component page reference type. Include the required attributes and optional state objects.
1this[NavigationMixin.Navigate]({
2 type: "standard__component",
3 attributes: {
4 componentName: "c__MyComponent",
5 },
6 state: {
7 c__optionalState: "stateValue",
8 },
9});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.
1// navToComponentWithState.js
2import { LightningElement } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4
5export default class NavToComponentWithState extends NavigationMixin(LightningElement) {
6 navigateToComponent() {
7 this[NavigationMixin.Navigate]({
8 // Pass in pageReference
9 type: "standard__component",
10 attributes: {
11 componentName: "c__myComponent",
12 },
13 state: {
14 c__propertyValue: "2000",
15 },
16 });
17 }
18}In your URL-addressable component, myComponent, use a getter to return the property value from the state object.
1// myComponent.js
2import { LightningElement, wire, api } from "lwc";
3import { CurrentPageReference } from "lightning/navigation";
4
5export default class MyComponent extends LightningElement {
6 @wire(CurrentPageReference)
7 currentPageRef;
8
9 @api propertyValue;
10
11 get propertyValue() {
12 return this.currentPageRef.state.c__propertyValue;
13 }
14}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.
1<!-- navToComponent.html -->
2<template>
3 <lightning-button
4 label="Go to Component"
5 class="slds-var-m-around_medium"
6 onclick={navigateToComponent}
7 ></lightning-button>
8</template>The component’s JavaScript passes in a page reference to the [NavigationMixin.Navigate](pageReference, [replace]) method using the standard__component type.
1// navToComponent.js
2import { LightningElement } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4
5export default class NavToComponent extends NavigationMixin(LightningElement) {
6 navigateToComponent() {
7 this[NavigationMixin.Navigate]({
8 // Pass in pageReference
9 type: "standard__component",
10 attributes: {
11 componentName: "c__myComponent",
12 },
13 });
14 }
15}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.
1<!-- workspaceOpenTab.html -->
2<template>
3 <div class="slds-m-around_medium">
4 <lightning-button label="Open Tab" onclick={handleOpen}>
5 </lightning-button>
6 </div>
7</template>The component’s JavaScript calls the openTab() method from lightning/platformWorkspaceApi.
1// workspaceOpenTab.js
2import { LightningElement, wire } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4import { IsConsoleNavigation, openTab } from "lightning/platformWorkspaceApi";
5
6export default class WorkspaceOpenTab extends NavigationMixin(LightningElement) {
7 @wire(IsConsoleNavigation) isConsoleNavigation;
8
9 async handleOpen() {
10 if (!this.isConsoleNavigation) {
11 return;
12 }
13 try {
14 await openTab({
15 pageReference: {
16 type: "standard__component",
17 attributes: {
18 componentName: "c__myComponent",
19 },
20 state: {
21 c__stateKey: "stateValue",
22 },
23 },
24 icon: "utility:sparkles",
25 label: "My Component",
26 });
27 } catch (error) {
28 // handle error
29 }
30 }
31}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.
1<!-- myComponent.html -->
2<template>
3 <div class="slds-var-m-around_medium">
4 <p>Component URL: {connectedCallbackUrl}</p>
5 <p>Current page reference:</p>
6 <pre><code>{currentPageRefFormatted}</code></pre>
7 </div>
8</template>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_.
1// myComponent.js
2import { LightningElement, wire } from "lwc";
3import { CurrentPageReference } from "lightning/navigation";
4
5export default class MyComponent extends LightningElement {
6 @wire(CurrentPageReference)
7 currentPageRef;
8
9 connectedCallbackUrl;
10
11 connectedCallback() {
12 this.connectedCallbackUrl = window.location.href;
13 }
14
15 get currentPageRefFormatted() {
16 return JSON.stringify(this.currentPageRef, undefined, 2);
17 }
18}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.
1this[NavigationMixin.Navigate]({
2 type: "standard__component",
3 attributes: {
4 componentName: "c__MyComponent",
5 },
6 state: {
7 c__mystate: "value",
8 uid: "1",
9 },
10});See Also
Release Preview
j