Navigating One Component to another component in customer Community using lightning components

To Achieve this we need to used forceCommunity:availableForAllPageTypes, and  lightning:isUrlAddressable

step 1:
Create a page in the lightning Community

steps:
Goto setup > All communities > select your community > Builder > on the top left you will find home > click on the drop-down > at the bottom of the drop-down you will find New page > click and create the new page (ex: page name - sample).

Once created click on 3 dots to see properties > take URL name.

step 2:
Component Name: component1.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes,lightning:isUrlAddressable" access="global" > 
    <lightning:navigation aura:id="navService"/>
    <aura:attribute name="parameter" type="String" />
   
    <lightning:button label="Navigate" onclick="{!c.navigateToComTwo}"/>
   
</aura:component>

Component Controller JS: component1Controller.js

({ 
   
    navigateToComTwo : function(component, event, helper) { 
       
        component.set("v.parameter","I am from comp 1");
        var urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({
                    // "/(pagename from community)?(name to pass parameter)="+(concatinate with values)
            "url": "/sample?param="+component.get("v.parameter"),
            "isredirect" :true
        });
        urlEvent.fire();
    } 
   
})

step 3:
Component Name: component2.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes,lightning:isUrlAddressable" access="global" > 
     
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="Receivedparameter" type="String" />
     
    <div class="slds-box slds-theme_default">
        This is component two. {!v.Receivedparameter}
    </div> 
     
</aura:component>

Component Controller JS: component2Controller.js

({ 
   
    doInit : function( component, event, helper ) { 
       
        var url_string = window.location.href;
        var url = new URL(url_string);
        var urlparameter = url.searchParams.get("param");
        console.log('myPageRef---'+urlparameter);
       
        component.set("v.Receivedparameter",urlparameter);
    } 
   
})