force:navigateToComponent (Beta)

Navigates from one Lightning component to another.
Note

Note

This release contains a beta version of force:navigateToComponent with known limitations.

To navigate from a Lightning component to another, specify the component name using componentDef. This example navigates to a component c:myComponent and sets a value on the contactName attribute.

navigateToMyComponent : function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:myComponent",
        componentAttributes: {
            contactName : component.get("v.contact.Name")
        }
    });
    evt.fire();
}

When fired from a component embedded in Lightning Experience or Salesforce1, the app creates and renders the target component in the app content area, replacing the current content. If you create a Lightning component tab and associate it directly with the component, this event lets you navigate to the tab associated with the target component. To create a Lightning component tab and associate it with the component, from Setup, enter Tabs in the Quick Find box, and then select Tabs.

This event doesn’t support target components that are embedded in another tab or in multiple tabs.

You can navigate only to a component that’s marked access="global" or a component within the current namespace.

Don’t depend on the URL generated by this event. It appears in the browser location bar and can be bookmarked, but the URL isn’t permanent.

Note

Note

This event is handled by the one.app container. It’s supported in Lightning Experience and Salesforce1 only.

Attribute Name Type Description Required?
componentDef String The component to navigate to, for example, c:myComponent
componentAttributes Object The attributes for the component
isredirect Boolean Specifies whether the navigation is a redirect. If true, the browser replaces the current URL with the new one in the navigation history. This value defaults to false.