function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Lavi__cLavi__c 

Navigate from one LWC to another LWC

Hello Everyone,
I have two lightning web components and I have to navigate from one LWC to another LWC on button click. 
I tried navigation service to apply the NavigationMixin function in component’s base class to extends NavigationMixin(LightningElement).but it dint work.

can please anyone help me?
Thank you.
 
Shivam Yadav 8Shivam Yadav 8
Hi Lavi,

As of now we can not navigate from one LWC to another LWC. But to handle other navigation from lwc please visit below links :
https://rajvakati.com/2019/02/02/lightning-web-component-navigation-service/ and
https://www.santanuatonline.com/navigation-mechanism-in-lightning-web-component

Thanks
Ashish Gupta 238Ashish Gupta 238
There is no direct way to navigate from one LWC to another. however there is a workaround. 
What you will need is to wrap that destination LWC in an Aura Component which implements lightning:isUrlAddressable and then Use NavigationMixin to navigate to that aura component. your JS for source LWC should look something like this :
  
import { NavigationMixin } from 'lightning/navigation';

export default class YOUR_COMPONENT  extends NavigationMixin(LightningElement) {

   handleClick(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        this[NavigationMixin.Navigate]({
            type: "standard__component",
            attributes: {
                componentName: "c__DESTINATION_AURA_COMPONENT"
            },
            state: {
            }
        });
  }
}

What I am not even sure is if this will work in Communities. 

 
Maulik Patel 38Maulik Patel 38
Hi  ,

There is a way by which you can navigate from one LWC to another LWC without wrapping up in the Aura component using the type as standard__webPage. Please find the code snippet below. 

handleNavigate() {
        var compDetails = {
            componentDef: "c:secondNavigationLWC",
            attributes: {
                //Value you want to pass to the next lwc component
                propertyValue: "500"
            }
        };
        // Base64 encode the compDefinition JS object
        var encodedCompDetails = btoa(JSON.stringify(compDetails));
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: '/one/one.app#' + encodedCompDetails
            }
        });
      
    }

Thanks,
Maulik
Ranita Mukherjee 1Ranita Mukherjee 1
Hi Maulik, 

can you please tell me that whether your code snippet will work on the lightning community page or not, as it's using the url '/one/one.app#'  & then the encoded url, that's why I am asking.

Thanks.
Suraj Tripathi 47Suraj Tripathi 47
Hii Lavi__c,

Below I am giving an Example for your Query.
----------------------
Component
---------------------- 
<template>
    <lightning-button label="Send" onclick={handleNavigation}></lightning-button>
</tempplate>
---------------------------
Js
-------------------------- 
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavigationExample extends NavigationMixin(LightningElement) {

handleNavigation() {
       this[NavigationMixin.Navigate]({
        type: 'standard__component',
        attributes: {
            componentName: 'c__MyLightningComponent'
        },
        state: {
            c__counter: '5'
        }
    });
   }
}
I hope it helps you.
kindly Let me inform if it helps you and close your query by choosing the best answer if you got your right answer so it can help others.

Thanks and Regards
Suraj Tripathi.
Yogendra JangidYogendra Jangid
HI
You can look at following blog on how to navigate from one LWC to another LWC with/without aura.
https://inevitableyogendra.blogspot.com/2021/05/navigate-from-one-lwc-component-to-another-lwc-component.html

If this helps, please mark this as best answers.
Siva Reddy 265Siva Reddy 265
we tried with BTOA option but few times while navigating between lwc components its opening in different tab as loading while keeping current tab as it is. so please be cautios while using this option