Navigate to detail page using lightning component

Question

I have created a component which is creating opportunity record and I want after successfull creation it redirects to the newly created opportunity detail page.

Opportunity creation is working fine but after creation it is not redirecting to the detail page. It throws the error

This page has an error. You might just need to refresh it. Error in $A.getCallback() [Cannot read property 'setParams' of undefined] Callback failed: apex://createOpp/ACTION$CreateOpportunity Failing descriptor: {c:createNewOppCmp}

Controller.JS:

({
save : function(component, event, helper) {
    var OpptyObj = component.get("v.Oppty");

    var action = component.get("c.CreateOpportunity");

    action.setParams({
        Oppty : OpptyObj 
    });

    action.setCallback(this,function(res){

        var oppId = res.getReturnValue();
        alert(oppId);
          var urlEvent = $A.get("e.force:navigateToURL");
            urlEvent.setParams({
           //   "url": "https://ashuforce-dev-ed.my.salesforce.com/"+oppId+" "
                "url" : "/006/o"+oppId
            });
            urlEvent.fire();
    });

  $A.enqueueAction(action);

} })

Not sure why e.force:navigateToURL is not working properly, what I am missing here?

Answer 1

Use new lightning:navigation component for that. Just add it to your component:

<lightning:navigation aura:id="navigation"/>

and in method navigate to detail page:

    component.find("navigation")
    .navigate({
        "type" : "standard__recordPage",
        "attributes": {
            "recordId"      : recordId,
            "actionName"    : actionName ? actionName : "view"   //clone, edit, view
        }
    }, true);

ps. you need to change API version to 43 in your component.

Answer 2

First of all: are you sure that you're recieving response with id of newly created opportunity?

I would recommend to check the state of the response before trying to navigate to created record, and then use e.force:navigateToSObject

var state = res.getState();
if(state === 'SUCCESS'){
    var oppId = res.getReturnValue();
    var navEvt = $A.get("e.force:navigateToSObject");
    navEvt.setParams({
        "recordId": oppId
    });
    navEvt.fire();
}