NavigationMixin is not working in LWC that embeded in Visualforce page

Question

My scenario is I have to override a button that called LWC. Due to limitation that not able to retrieve parent id in Aura, I have to embed AURA in Visualforce including LWC.

The LWC is done nothing except act as dispatcher to call the apex controller and redirect based on the result. I tried to redirect using NavigationMixin refer to code below but it fails. For me it should works based on googling result, however I never find any example that use Visualforce page, Aura and LWC and then redirect so now I wonder whether is it possible to do navigation from LWC when it is wrapped inside VF page. Here my code example :

Visualforce page

    $Lightning.use("c:customObjectAura", function() {
         $Lightning.createComponent("c:customObjectLwc", {
                 opportunityId:"{!CustomObject.Opportunity__c}"
             },

          "lightning",
          function(component) {
            console.log("LWC component was created");

          }
      );
    });
</script>

Here my Aura app - it does nothing only to wrap LWC.

<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="customObjectLwc"/>
<aura:dependency resource="markup://force:*" type="EVENT"/>
</aura:application>

Here my lwc javascript. All success except for NavigationMix

import { LightningElement ,track,api,wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { createRecord } from 'lightning/uiRecordApi';
import CUSTOM_OBJECT from '@salesforce/schema/CustomObject__c';
import OPPORTUNITY_ID from '@salesforce/schema/CustomObject__c.Opportunity__c';
import RECORD_TYPE_ID from '@salesforce/schema/CustomObject__c.RecordTypeId';
import getCustomObjectWrapper from '@salesforce/apex/CustomObject__c_Create_LWC.getBBRWrapper';

export default class customObjectLwc extends NavigationMixin(LightningElement){
    @api results;
    @api recordId;
    @api opportunityId;
    @api createStatus;

   connectedCallback() {  

     getCustomObjectWrapper(        
           {
                opportunityId:this.opportunityId
            })
             .then(result => {
                      this.result = result;
                      console.log('result ==> '+JSON.stringify(result));
                      console.log('recordTypeId ==> '+result.recordTypeId);

                      this.createStatus = result.createStatus;
                      this.opportunityId=result.opportunityId;
                      this.recordTypeId=result.recordTypeId;
                      this.recordId=result.recordId;

                        console.log('The record id is returned  '+this.recordId);

                         this[NavigationMixin.Navigate]({
                            type: 'standard__recordPage',
                            attributes: {
                                recordId: this.recordId,
                                objectApiName: 'CustomObject__c', // objectApiName is optional
                                actionName: 'view'
                            }
                        });

            })
            .catch(error => {
               this.results = [];
               this.error = error;
               console.log('this.error ==> '+this.error);

           });
    }//end of connectedCall
}

Answer 1

When you look at lightning-navigation, you'll see it's only supported in:

Lightning Experience, Lightning Communities, Salesforce Mobile App

Notably, it is not supported in Lightning Out. You'll need to come up with a different approach.

Answer 2

it is expected behavior. please check documentation Navigation

Experience Lightning Experience, Lightning Communities, Salesforce Mobile App

it will not work for Lightning Out (embedded in VF page)

Answer 3

If you are using the LWC in a VFPage then the following does't work which works in LEX.

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

So if you want to redirect to a record page from LWC embedded in a VFPage then you can use

window.location.assign('/'+actualRecordId);

Answer 4

As a work around you can fetch the base URL of salesforce using window.location.origin

and implement the below solution using an anchor tag.

/*for custom URL for use in href of anchor tab*/
  get setBaseUrl() {
    return (this.sfdcBaseURL = window.location.origin + "/" + this.recordId);
  }

    <a
      class="slds-button slds-button_brand"
      href={setBaseUrl}
      if:true={setBaseUrl}
      >Back</a
    >

Answer 5

Try to change

this[NavigationMixin.Navigate]({
                        type: 'standard__recordPage',
                        attributes: {
                            recordId: this.recordId,
                            objectApiName: 'CustomObject__c', // objectApiName is optional
                            actionName: 'view'
                        }
                    })

to

this[NavigationMixin.GenerateUrl]({
    type: 'standard__recordPage',
    attributes: {
        recordId: this.recordId,
        objectApiName: 'CustomObject__c', // objectApiName is optional
        actionName: 'view'
    }
}).then(url => {
    window.open(url, "_self");
});

so that you'll generate a new URL and then reload the page to show it

Answer 6

Still you can make it working like below

Call your LWC in lightning.app

<c:lwcComponent lwcVar="{!v.variable}" />

In lwc component add a variable with @api decorator

@api lwcVar

Based on lwcVar you can update your NavigationMixin.Navigate