function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Katie KourtakisKatie Kourtakis 

Navigation in LWC not Working

Hello,

I am trying to navigate to a record page when a button is clicked. I receive an error each time saying the page does not exist and to enter a valid url and try again. I tried navigating to a webpage to see if that would work and it did. Based on code examples and documentation I've seen I can't figure out why navigating to a record page is not working properly. 

Some context: My LWC sits on the campaign object and creates a button for each volunteer job that is connected to the campaign. Right now I am just trying to get the button to go to one of the volunteer job record pages. Once I know the navigation works I am going to try and fill the recordId attribute with the recordId associated with each button to direct to the correct volunteer job.

HTML:
<template>
    <lightning-card title="Program Navigation" record-id={recordId}>
        <ul class="slds-button-group-row slds-align_absolute-center">
            <template for:each={data} for:item="program">
                <li key={program.Id} class="slds-button-group-item">
                    <button class="slds-button slds-button_brand" onclick={navigateToVolunteerJob}>
                    {program.Name}</button>
                </li>
            </template>
        </ul>
    </lightning-card>
</template>

JS
import { LightningElement, track, api, wire } from 'lwc';
import getPrograms from '@salesforce/apex/programButtonController.getPrograms';
import { NavigationMixin } from 'lightning/navigation';

export default class ProgramButtons extends NavigationMixin(LightningElement) {
    @track data = [];
    @api recordId;

    @wire(getPrograms, {
        recordId: '$recordId'
    })
    wiredRecord(result) {
        if(result.data) {
            this.data = result.data;
            this.error = undefined;

        } else if (result.error) {
            this.error = 'Unknown error';
            this.data = undefined;
        }

        
    }

//Navigate to recordpage on click
    navigateToVolunteerJob() {
        this[NavigationMixin.Navigate]({
            type: 'standard_recordPage',
            attributes: {
                recordId: 'a0T02000000GoISEA0',
                objectApiName: 'GW_Volunteers__Volunteer_Job__c',
                actionName: 'view'
            }
        });

    }

//test naviagting to webpage
    navigateToWebPage() {
        // Navigate to a URL
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: 'http://salesforce.com'
            }
        },
        true // Replaces the current page in your browser history with the URL
      );
    }
}



Thanks!
Katie 
ANUTEJANUTEJ (Salesforce Developers) 
Hi Katie,

Can you try hardcoding the URL and see if it works??

Regards,
Anutej
Katie KourtakisKatie Kourtakis
Hi,
I just hardcoded the URL like so and it still came back with an error that the page does not exist. :(
//Navigate to recordpage on click
    navigateToVolunteerJob() {
        this[NavigationMixin.Navigate]({
            type: 'standard_webPage',
            attributes: {
                url:'https://fcmichigan--lwc.lightning.force.com/lightning/r/GW_Volunteers__Volunteer_Job__c/a0T02000000GoISEA0/view'
            }
        },
        true
        );

    }

Thanks,
Katie
ANUTEJANUTEJ (Salesforce Developers) 
Can you try checking if instead of that URL are you able to navigate to any other URL, also can you check if the below works?
 
({
	NavigationRec : function(component, event, helper) {
        component.find("navId").navigate({
            type: 'standard__recordPage',
            attributes: {
                recordId : 'a0T02000000GoISEA0', // Hardcoded record id from given objectApiName
                actionName: 'view',  //Valid values include clone, edit, and view.
                objectApiName: 'GW_Volunteers__Volunteer_Job__c' //The API name of the record’s object
            }}, true);
	
    }})
I found the above in http://www.sfdcpanda.com/pagereference-record-page-navigation-lightning/ 

Do let me know if it works.
Venu9999Venu9999
Use html data attributes to get the dynamic record id so that it willl navigate to specific record.


<span data-key={record.Id} data-name={record.Name} class="slds-listbox__option-text slds-listbox__option-text_entity">{record.Name} </span>
in Js function: 
this.selectedRecordId = event.target.dataset.key;

And ObjectApiName is not mandatory as per the documentation. Remove object api name and try once.

check example: Navigate to Record Page Based On Record Id In LWC (https://www.salesforcepoint.com/2020/07/redirect-to-record-page-in-lwc-code.html)