Navigate/Redirect To Record Page Based On Record Id In LWC (Lightning Web Component)

Redirect or Navigate to salesforce object record detail page in Lwc:

In many scenarios we need to redirect to record detail page upon successful record save or update into database. Below code is helpful for navigate to sobject record page in Lightning web components. For navigating to record page in lightning experience we need to use lightning navigation service.

Implementation steps to navigate/Redirect to record page in LWC components: 

For Using navigation service in Lwc we need to import NavigationMixin  from lightning/navigation base.

import { NavigationMixin } from 'lightning/navigation';

Then we need to Apply the NavigationMixin function to your component’s base class.

export default class MyCustomElement extends NavigationMixin(LightningElement) {
}

Add new function to redirect to record page in JavaScript and specify object api name, record id in objectApiName and recordId attributes. Call this function wherever you want (Like after success return from apex).

navigateToRecordPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: 'recordId',
                objectApiName: 'ObjectApiName',
                actionName: 'view'
            }
        });
}

Example: in below example we create new button, once we click on button tit should redirect to specified account record page.

redirectToRecordPage.html

 <template>  
   <div class="slds-box slds-theme_shade">  
     <lightning-button label="Navigate To Account" onclick="{navigateToAccountPage}"> </lightning-button>  
   </div>  
 </template>  

redirectToRecordPage.js

 
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class RedirectToRecordPage extends NavigationMixin(LightningElement) {

    navigateToAccountPage() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: '0010K000027o6pWQAQ',
                objectApiName: 'Account',
                actionName: 'view'
            }
        });
 }
}

Output:

Subjects:

Lightning Web Components Lightning Web Components Basics LWC LWC Basics Salesforce lwc

Share This: