Cannot call the lightning Component through URL

Question

I am trying to call the Lightning component through a URL in the Page Detail button. The lightning component (CaseChangeStatus) is like below

Component

<aura:component implements="lightning:isUrlAddressable">
  <aura:attribute name="record" type="Case" default="{ 'sobjectType': 'Case' }" />
  <aura:attribute name="recordId" type="String" />
  <aura:attribute name="complete" type="Boolean" default="false" />
  <force:recordData recordId="{!v.recordId}"
                    fields="['CaseNumber','Status']"
                    targetFields="{!v.record}"
                    aura:id="recordData"
                    mode="EDIT"
                    recordUpdated="{!c.recordLoaded}" />
</aura:component>

Controller

({ 
  recordLoaded: function(component, event, helper) {
    var caseRecord = component.get("v.record"),
      recordData = component.find("recordData");

      caseRecord.Status = 'Closed';

      if(!component.get("v.complete")) { // Avoid infinite loop
      component.set("v.complete", true);
      component.set("v.record", caseRecord);
      recordData.saveRecord($A.getCallback(function(result) {
        if(result.state === "SUCCESS" || result.state === "DRAFT") {
            $A.get("e.force:closeQuickAction").fire();                                  
        }          
      }));
  }
  }})

I tried to call the component from the URL button like

/lightning/cmp/c__ChageCaseStatus?c__recordId={!Case.Id}

But I ended up getting the blan screen

Answer 1

This is odd, and I had to struggle with this the first time I used the lightning:isUrlAddressable interface. It turns out that the component name and any URL attributes must be prefixed with c__

Your URL should be /lightning/cmp/c__ChageCaseStatus?c__recordId={!Case.Id} or /lightning/cmp/c__ChageCaseStatus

Answer 2

The url attributes must be suffixed c__ as per the documentation of lightning:isUrlAddressable