Lightning:Navigation is not working

Question

I am exploring the use of the new Lightning:navigation component but it is not working so I'm trying to figure out what is the issue.

First Component - TestURLParameterComponent.cmp (API 43)

<aura:component implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<lightning:navigation aura:id="navService"/>
<aura:attribute name="url" type="string"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:button label="Navigate" onclick="{!c.handleClick}"/>
</aura:component>

Controller -

({
doInit: function(component, event, helper) {

},
handleClick : function(component, event, helper) {
    var navService = component.find("navService");
    var pageReference = {
        "type": "standard_component",
        "attributes": {
            "componentName": "c__URLParameterComponent"
        }
    }

    navService.navigate(pageReference);
}
})

Second Component -

<aura:component implements="lightning:isUrlAddressable,force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="pageReference" type="Object"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div>here</div>
</aura:component>

Controller -

({
doInit : function(component, event, helper) {
    console.log(component.get("v.pageReference"));
}
})

The message I receive when I click on the button is "Page doesn't exist. Enter a valid URL and try again".

Answer 1

Your issue here seems to be on the line where you are setting the pageReference type value.

"type": "standard_component". You are missing an additional underscore here.

Per documentation of pageReference, to navigate to a standard component, you will need to define the type as: standard__component (notice the extra underscore). Once corrected, it should look like as below:

"type": "standard__component"