How to navigate from one component to other component in lightning

We will use lightning:navigation component to navigate to other component. Please follow below steps for the same-

Step 1.  Add the lightning:isUrlAddressable interface to the component on which you want to navigate. for eg.

    
    
    {!v.dummyValue}.

Step 2. Retrieve the attribute values from the page state. In below code, ‘c__dummyString’ is the attribute.

//------------Component1Controller.js-----------------------------
({
    init: function(cmp, evt, helper) {
        var myPageRef = cmp.get("v.pageReference");
        var dummyString = myPageRef.state.c__dummyString;
        cmp.set("v.dummyValue", dummyString);
    }
})

Step3. Add lightning:navigation component to the component from which you are navigating to other component (URL addressable component for eg. Component1 in our case).

Step4. Define page reference for the component you’re navigating to. Its recommended to set the page reference using an init handler. This example stores the pageReference in an attribute in the component, and is used to navigate later in the click handler.

//------------Component2Controller.js-----------------------------
({
    init : function(component, event, helper) {
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__Component1', //Don't forget to add 'c__'
            },
            state: {
                "c__dummyString": "Page navigated successfully"
            }
        };
        component.set("v.pageReference", pageReference);
     },

     handleClick: function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = component.get("v.pageReference");
        event.preventDefault();
        navService.navigate(pageReference); //use this to navigate to other component using pageReference
     }
})

How to Test:
You can create a lightning custom tab for component ‘Component2’.

You will see ‘navigate’ button when you click on this tab using app launcher. Now click on ‘navigate’ button, you will be redirected to other component.

You will see following text on the screen-
Page navigated successfully.