Migrate to lightning:isUrlAddressable from force:navigateToComponent

The pageReference JavaScript object represents a URL for a page. You can use a pageReference instead of parsing or creating a URL directly. This approach helps you avoid broken navigation if Salesforce changes URL formats in the future.

If you’re currently using the force:navigateToComponent event, you can provide backward compatibility for bookmarked links by redirecting requests to a component that uses lightning:isUrlAddressable.

First, copy your original component, including its definition, controller, helper, renderer, and CSS. Make the new component implement the lightning:isUrlAddressable interface.

Change the new component to read the values passed through the navigation request from cmp.get("v.pageReference").state.

You can’t use two-way binding to map values from pageReference.state to a subcomponent that sets those values. You can’t modify the state object. As a workaround, copy the values from pageReference.state into your own component’s attribute using a handler.

1// Add a handler to your component 
2<aura:handler name="init" value="{!this}" action="{!c.init}" />
3
4// Controller example
5({
6    init: function(cmp, event, helper) {
7        var pageReference = cmp.get("v.pageReference");
8        cmp.set("v.myAttr", pageReference.state.c__myAttr);
9        // myAttr can be modified, but isn’t reflected in the URL 
10    }
11})

Note

In the new component, remove the attributes mapped from the URL that aren’t used to copy values from the page state in the component’s init handler.

Change the instances that navigate to your old component to the new API and address of your new component. For example, remove instances of force:navigateToComponent, like $A.get("e.force:navigateToComponent").setParams({componentDef: "c:oldCmp", attributes: {"myAttr": "foo"}}).fire();.

Add <lightning:navigation aura:id="navigationService" /> to your component markup, and update it to use navigationService. Pass in a pageReference.

1cmp.find("navigationService").navigate({
2    type: "standard__component",
3    attributes: {
4        componentName: "c__myCmpCopy" 
5    },
6    state: { 
7        "c__myAttr": "foo" 
8    }
9});

In the original component’s init handler, send a navigation redirect request to navigate to the new component. Pass the third argument in the navigate API call as true. This argument indicates that the request replaces the current entry in the browser history and avoids an extra entry when using a browser’s navigation buttons.

1({
2    init: function(cmp, event, helper) {
3        cmp.find("navigation").navigate({
4            type: "standard__component",
5            attributes: {
6                componentName: "c__componentB" },
7            state: {
8                c__myAttr: cmp.get("v.myAttr")
9            } 
10        }, true); // replace = true 
11    }
12})

Remove all other code from the original component’s definition, controller, helper, renderer, and CSS. Leave only the navigation redirect call.

Lightning Aura Components Developer Guide

Migrate to lightning:isUrlAddressable from force:navigateToComponent