I want to redirect the record to its detail page when onclick from the component. <a href="{!'/'+resultWrap.resultId}" class="slds-card__header-link slds-truncate" > <span class="slds-text-heading_small" style="{!'color:'+v.textColor}"> {!resultWrap.resultHeader} </span> </a> so i specified the ID in href.

It works fine in lightning component, but in the Community builder when I click the record am getting an error message (invalid page)

  • your url path is incorrect, check your community url and compare
    – glls
    Sep 21 '17 at 5:14
  • Am sorry can you elaborate, I didn't get it. From the lightning component page when I click the record (link) it is redirected to detail page
    – SFDC
    Sep 21 '17 at 5:16

Really, you shouldn't be using direct links like that to navigate in Lightning. You should use a e.force:navigateToSObject event. The domain for the community URL will change depending on whether you are in sandbox or production; and whether you're using a custom domain.

The path can change based on options selected in Community Builder e.g. a Contact record can be /mycommunity/s/contact/0035E00000766I7QAI/firstname-lastname today, but then it can change in community builder to become /mycommunity/s/my-contact/0035E00000766I7QAI/firstname-lastname tomorrow.

I use a custom component instead of links, and that sorts out the whole mess for me.


<aura:component access="global">

    <aura:attribute name="type" type="String" default="a" />
    <aura:attribute name="class" type="String" />
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="relativeUrl" type="String" />
    <aura:attribute name="id" type="String" />

    <aura:if isTrue="{!v.type == 'button'}">
        <button id="{!v.id}" class="{!v.class}" onclick="{!c.onClick}">
        <aura:set attribute="else">
            <a id="{!v.id}" class="{!v.class}" onclick="{!c.onClick}">



    onClick : function(component, event, helper) {
        var recordId = component.get('v.recordId');
        var navEvt;
        if(recordId) {
            navEvt = $A.get("e.force:navigateToSObject");
            navEvt.setParam("recordId", recordId);
        } else {
            navEvt = $A.get("e.force:navigateToURL");
            navEvt.setParam("url", component.get('v.relativeUrl'));

Which would make your code:

<c:Link recordId="{!resultWrap.resultId}" class="slds-card__header-link slds-truncate"  >
        <span class="slds-text-heading_small" style="{!'color:'+v.textColor}">

invalid page means that the url which you are referencing does not exist, for example, if your href is referencing:


you will get an invalid page, look at the actual url when you open record details in communities and modify your href accordingly.

  • <a href="{!'/'+resultWrap.resultId}" class="slds-card__header-link slds-truncate" > <span class="slds-text-heading_small" style="{!'color:'+v.textColor}">{!resultWrap.resultHeader}</span> </a> This is my code which i refered before
    – SFDC
    Sep 21 '17 at 5:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.