Hi Team,
Just I created two components. My requirement is need to navigate one component to another component when i click on my image.
But i am getting some error like...This page has an error. You might just need to refresh it.
Action failed: c:Component1$controller$click [Cannot read property 'setParams' of undefined].
            
                Please help me on this... Thanks in advance...

Component1:

<ul class="slds-list--horizontal slds-has-dividers_around-space" onclick="{!c.click}">

  <lightning:layout >
            <lightning:layoutItem size="3" padding="around-small">
                 <div class="img " >
                    <img  style="height: 100px;" src="/resource/Images/Assets/1.png"  />   
                  <h1>TEXT1</h1>
                </div> 
            </lightning:layoutItem>
            <lightning:layoutItem size="3" padding="around-small">
                <div class="img1" >
                    <img style="height: 100px;" src="/resource/Images/Assets/2.png"  />  
                   <h1>TEXT2</h1>
                </div> 
            </lightning:layoutItem>
            <lightning:layoutItem size="3" padding="around-small">
               <div class="img2" ><img style="height: 100px;" src="/resource/Images/Assets/3.png" align="middle" />      
                <h1>TEXT3</h1>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem size="3" padding="around-small">
                <div class="img3"  style="text-align: left">
                    <img style="height: 100px;" src="/resource/Images/Assets/4.png"/>  
                    <h1>TEXT4</h1>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
              


</ul>   

Controller.Js


click:function(component,event,helper){        

       
       var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef : "c:Component2",
        
            });
        
      
        evt.fire();
    }
    
    Thanks
    Venkat