LWC Button to Open Create Record Page - So Complicated?

Question

New to LWC...in visualforce, all I need to create a button that opens the create record page is:

<apex:pageBlockButtons location="top">
      <apex:commandButton value="New Use Case" action="/a1A/e?retURL={!Opportunity.id}&oppid={!Opportunity.id}" />
      <apex:commandButton action="{!save}" value="Save" id="saveButton" />
      <apex:commandButton onclick="resetInlineEdit()" id="cancelButton" value="Cancel" />                             
</apex:pageBlockButtons>

In LWC this seems much more difficult, am I missing something? I just want a "New" button at the top of my lightning card, is there no way to just specify a URL? I found this, but it involves a whole new JS class, and I'm not sure how to do that in conjunction with the JS I already have. Create a whole new file?

Many thanks

HTML

    <lightning-button class="slds-m-around_medium" label="New" onclick={???}></lightning-button>

    <div class="slds-m-around_medium">  

        <div if:true={records.data}>  

            <template for:each={records.data} for:item="rec">    

                <div key={rec.Id} class="slds-box">  

                    <lightning-record-form record-id={rec.Id}   
                                           object-api-name={objectName}   
                                           layout-type="Full"   
                                           mode="view"  
                                           columns="4"> 
                                            
                    </lightning-record-form>  

                </div>  
                  
            </template>  

        </div>  

    </div>  

</lightning-card>  
  

JS

import { LightningElement, api, wire } from 'lwc';  
import fetchRecords from '@salesforce/apex/RelatedListController.fetchRecords';
  
  
export default class RelatedList extends LightningElement {  
  
    @api objectName;  
    @api fieldName;  
    @api fieldValue;  
    @api parentFieldAPIName;  
    @api recordId;  
    @api strTitle;  
    @api filterType;  
    @api operator;  
    get vals() {  
        return this.recordId + ',' + this.objectName + ',' +   
               this.parentFieldAPIName + ',' + this.fieldName + ',' +   
               this.fieldValue + ',' + this.filterType + ',' + this.operator;  
    }  
      
    @wire(fetchRecords, { listValues: '$vals' })  
    records;  
  
}

EDIT: I have made the updates below, works now.

<template>  
      
    <lightning-card title={strTitle} icon-name="standard:record"> 

        <lightning-button class="slds-m-around_medium" label="NewMix" onclick={navigateToNew}></lightning-button>

        <div class="slds-m-around_medium">  
  
            <div if:true={records.data}>  
  
                <template for:each={records.data} for:item="rec">    
  
                    <div key={rec.Id} class="slds-box">  
  
                        <lightning-record-form record-id={rec.Id}   
                                               object-api-name={objectName}   
                                               layout-type="Full"   
                                               mode="view"  
                                               columns="3"> 
                                                
                        </lightning-record-form>  
  
                    </div>  
                      
                </template>  
  
            </div>  
  
        </div>  
  
    </lightning-card>  
      
</template>

JS

import { LightningElement, api, wire } from 'lwc';  
    import fetchRecords from '@salesforce/apex/RelatedListController.fetchRecords';
    import { NavigationMixin } from 'lightning/navigation'; 
      
    export default class RelatedList extends NavigationMixin(LightningElement) {   
      
        @api objectName;  
        @api fieldName;  
        @api fieldValue;  
        @api parentFieldAPIName;  
        @api recordId;  
        @api strTitle;  
        @api filterType;  
        @api operator;  
        get vals() {  
            return this.recordId + ',' + this.objectName + ',' +   
                   this.parentFieldAPIName + ',' + this.fieldName + ',' +   
                   this.fieldValue + ',' + this.filterType + ',' + this.operator;  
        }  
          
        @wire(fetchRecords, { listValues: '$vals' })  
        records;  
    
        navigateToNew() {
            this[NavigationMixin.Navigate]({
                type: 'standard__objectPage',
                attributes: {
                    objectApiName: 'POC_Use_Case__c',
                    actionName: 'new'
                }                    
            });
        }
    }

Answer 1

In LWC we have navigation mixins.

All you need is below changes to your lwc component, Extend a navigation mixin and implement it for new button nav

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

export default class ComponentClass extends NavigationMixin(LightningElement) {
    navigateToNewOpportunity() {
    this[NavigationMixin.Navigate]({
        type: 'standard__objectPage',
        attributes: {
            objectApiName: 'Opportunity',
            actionName: 'new'
        }
    });
}
}

---

HTML Template changes

    <lightning-button class="slds-m-around_medium" label="New" onclick={navigateToNewOpportunity}></lightning-button>

Answer 2

Make Sure to change extend LightningElement to extend NavigationMixin(LightningElement) without which the NavigationMixin would not work. Docs Reference