Navigation from one LWC to another LWC

Sometimes we need to navigate to some other pages (record page, home page, components etc) in lightning, the same applies to Lightning Web Component as well.
For navigation from one LWC to the other, we need to create a lightning component (aura - component), which would implement isUrlAddressable interface and embed the other 
LWC inside this aura-component.

For an instance, on click of a button on cmp1, we need to navigate to the LWC cmp2 -

We will create an aura component - navAuraCmp, which will embed cmp2 :

--------------------- navAuraCmp.cmp --------------------------

<aura:component implements="lightning:isUrlAddressable">
<!-- implementing isUrlAddressable interface -->
    <aura:attribute name="recId" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:handler name="change" value="{!v.pageReference}" action="{!c.reInit}" />
<!-- for the data to refresh everytime a new recId is passed -->
             Id ==> {!v.cmp2}
             <c:cmp2 recId="{!v.recId}"></c:cmp2>
</aura:component>

------------------- navAuraCmpController.js -----------------

({
init: function(component, event, helper) {
        var myPageRef = component.get("v.pageReference");
        var rId = myPageRef.state.c__recId;
        component.set("v.recId", rId);
    },
    
    reInit : function(component, event, helper) {
        $A.get('e.force:refreshView').fire();
    }
})


-------------------------- cmp1 --------------------------
.html:

<template>
 <td>
 <div>
 <p style="width:130px"></p>
  <lightning-button value={item.Id} onclick={aButton} label="Click me">
  </lightning-button>
 </div>
 </td>
</template>

.js:

import { LightningElement, track, wire, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
//import NavigationMixin in the LWC
export default class cmp1 extends NavigationMixin(LightningElement) {

aButton(event){
        var val = event.target.value;
        console.log(" --->>> -- "+val);
        
        this[NavigationMixin.Navigate]({
            type: "standard__component",
            //when navigating to a component

            attributes: {
              componentName: "c__navAuraCmp"
              //c__<aura_component_name>
        },
        state: {
                              //state is used to pass the data
             c__recId: val
                             //the attribute <recId> on the navAuraCmp
       }
       });
    }
}

-------------------------- cmp2 --------------------------
.html:

<template>
{recId}
</template>

.js:

import { LightningElement, track, wire, api } from 'lwc';
export default class cmp2 extends LightningElement {
    @api
    //getter method
    get recId() {
        return this._recId;
    }
    //setter method
    set recId(value) {
       if(value){
            this._recId = value;
       }else{
            this._recId = undefined;
       }
}