<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable"
                access="global" >
 <h1> I am F1 Comp </h1>
   </aura:component/>

PrimaryComponent.cmp
----------------------------
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable"
                access="global" >
  <aura:attribute name="pageReference" type="Object"/>
 <aura:handler name="init" value="{! this }" action="{! c.init }"/> 
<lightning:navigation aura:id="navService"/> 
<lightning:button label="Navigate" onclick="{!c.handleClick}"/>
</aura:component/>

Controller : 

​

    init : function(component, event, helper) {
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__F1Comp',
            },
            state: {
                 
            }
        };
        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);
    }