use of lightning navigate:navigate from one component to another in lightning community

Question

var eUrl= $A.get("e.force:navigateToURL");
        eUrl.setParams({
            "url": url 
        });
         eUrl.fire();

I am trying to replace above in my code as per documentation it is not recommended. I am trying to use lightning:Navigate.

Source component(where buttons are present):-

 <aura:component  
    implements= "lightning:isUrlAddressable, force:appHostable, 
   forceCommunity:availableForAllPageTypes" 
    access="global" controller="ViewNewController"> 
  <lightning:navigation aura:id="navService"/>
  <aura:attribute name="pageReference" type="Object"/>
  <aura:attribute name="url" type="String"/>
 <lightning:button class="PC-save-btn slds-m-right_large" variant="brand" 
    label="edit" onclick="{!c.handleClick}"/>
  </aura:component>

controller js

   doInit: function(component, event, helper){
      //NAVIGATION USING LIGHTNING
    var navService = component.find("navService");
var pageReference = {

    "type": "standard__component",
    "attributes": {
        "componentName": "c__Reg_Edit"    
    },    
    "state": {
        "c__Id": 'a2R18000004rqUyEAI'  ,// WILL LATER COME AS DYNAMIC
        "c__NORT": 'NORT-99981347'    
    }
  };
component.set("v.pageReference", pageReference);
var defaultUrl = "#";
navService.generateUrl(pageReference)
.then($A.getCallback(function(url) {
    component.set("v.url", url ? url : defaultUrl);
}), $A.getCallback(function(error) {
    component.set("v.url", defaultUrl);
}));

},
 handleClick: function(component, event, helper) {
var navService = component.find("navService");
// Uses the pageReference definition in the init handler
//JSON.stringify(pageReference); - THIS DATA COMES IN DEBUG JS
//"{"type":"standard__component","attributes": 
//{"componentName":"c__PC_OppReg_Edit"},"state": 
//{"c__Id":"a2R18000004rqUyEAI","c__NORT":"NORT-99981347"}}"
var pageReference = component.get("v.pageReference");//DEBUG POINT HERE
event.preventDefault();
navService.navigate(pageReference);//CODE IS STUCK HERE
}

Component 2:-
(where needs to be directed to with 2 parameters

 <aura:attribute name="res" type="String" />

  <aura:handler name="change" value="{!v.pageReference}" action=" 
{!c.onPageReferenceChange}"/>

CONTROLLER JS

onPageReferenceChange: function(component, event, helper) {
    var myPageRef = component.get("v.pageReference");
    var firstname = myPageRef.state.c__res;
    component.set("v.res", res);
  },

Went through following links:-

I am getting DEBUG DATA as highligher in comments but .navigate is stuck.

score 0 · Answer 1 · answered Dec 04 '19 at 22:25

i have found 2 issues in your code.

based on your question title, i under stood your issue at in lightning community.if yes

your should use comm__namedPage for type of pagereference instead of standard__component refer page reference doc.

function(component, event, helper) {
event.preventDefault();
var navService = component.find("navService");
var pageReference = {
    type: "comm__namedPage",
    attributes: {
        pageName: "some-page-name"
    },
    state: {
        c__myAttr: 'some value'
    }
};
sessionStorage.setItem('pageTransfer', JSON.stringify(pageReference.state));
navService.navigate(pageReference);
}

2. why i used session state? i already answered for in other place. please check out this answer navigate to other page in community

let me know if you have any issue after this solution applies.

use of lightning navigate:navigate from one component to another in lightning community

1 Answers1