In Community, navigate from one aura component to another

Question

I have a community page where I need to navigate from one aura component to another (on the same page, no full page redraw). I start in "FirstComponent.cmp" and click a button which should result in displaying SecondComponent.cmp

FirstComponent.cmp

<aura:component controller="FMZ_SuiteServices"
  implements="flexipage:availableForRecordHome,flexipage:availableForAllPageTypes,force:hasRecordId,force:appHostable,forceCommunity:availableForAllPageTypes"
  access="global">

  <lightning:navigation aura:id="navService"/>

<lightning:button label="Add Tour" onclick="{!c.handleAddTour}"></lightning:button>

</aura>

firstComponentController.js (segment)

handleAddTour: function (component, event, helper) {

component.find("navService").navigate({
  type: 'standard__component',
  attributes: {
    componentName: "c__SecondComponent"
  },
  state: {}
});

},

SecondComponent.cmp

    <aura:component controller="FMZ_TourServices"
implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:appHostable,force:lightningQuickAction,forceCommunity:availableForAllPageTypes,lightning:isUrlAddressable"
access="global">Welcome To The Second Component</aura>

Would appreciate any help with what I am missing! TIA

Answer 1

you set wrong page reference Type, i would recommend to go through pageReference Types once again. for communities you should be use comm__namedPage not standard__component and check pageName attribute too. your code should like below.

    handleAddTour: function (component, event, helper) {

      component.find("navService").navigate({
         type: 'comm__namedPage',
         attributes: {
          pageName: "custom community page"  // for page name you have to create custom page in your community then drag 2nd component in to that page
          },
          state: {}
         });
   },