sapui5 popup navigating to another xmlview

I am extending an fiori app and have replaced a view and placed a popup. Now my requirement is when I click the close button in the popup I want to open an xmlview.

code.
sap.m.MessageBox.error( "Error Message - some error", 
{ icon: sap.m.MessageBox.Icon.ERROR, title: "Confirmation Error", onClose: function (oAction) { 
 this.router = sap.ui.core.UIComponent.getRouterFor(this); 
this.router.navTo("customview"); } } );

can some one pls advise on the error I am getting.

'navTo' of undefined

manifest.json

"routing": {
   "config": {
    "routerClass": "sap.m.routing.Router",
    "viewType": "XML",
    "viewPath": "publicservices.her.myApp.myAppExtension.view",
    "controlId": "app",
    "controlAggregation": "pages",
    "async": true
   },
   "routes": [{
    "pattern": "",
    "name": "customView",
    "target": "customView"
   }
   ],
   "targets": {

    "customView": {
    "viewName": "customView",
     "viewId": "customView"
    }
   }
  }
 }

Solution

There are a few things I want you to check in your project in order for your router to be defined. I added an example below.

Hope this helps.

Component

    init: function() {
        UIComponent.prototype.init.apply(this, arguments);
        this.setModel(models.createDeviceModel(), "device");

        // MAKE SURE YOUR ROUTER IS INITIALISED HERE
        this.getRouter().initialize();
    }

Manifest 1

Make sure you add a controlId and controlAggregations

    "routing": {
        "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "Test.view",
            "controlId": "app",
            "controlAggregation": "pages"
        },

Manifest 2

    "routes": [{
            "pattern": "",
            "name": "main",
            "target": "main"
        }, {
            "pattern": "side",
            "name": "side", // YOU'LL USE THIS NAME TO NAVIGATE IN THE CONTROLLER
            "target": "side"
        }],
        "targets": {
            "main": {
                "viewName": "Main"
            },
            "side": {
                "viewName": "Side" // ENSURE THIS IS CORRECT (this refers to view: 'Side.view.xml')

            }
        }

View

<App id="app"> <!-- ADD THIS ID TO ALL VIEWS -->
    <pages> <!-- SHOULD HAVE THE SAME VALUE AS CONTROLID IN THE MANIFEST-->
        <Page title="Page 1">
            <content>
                <Button press="onOpenMessageBox" text="Open" />
            </content>
        </Page>
    </pages>
</App>

Controller

Navigate to route with the name "side"

    onOpenMessageBox: function() {
        var that = this; // SET VARIABLE THAT TO THIS
        sap.m.MessageBox.error("Error Message - some error", {
            icon: sap.m.MessageBox.Icon.ERROR,
            title: "Confirmation Error",
            onClose: function(oAction) {
                // CHANGE ALL 'this' TO 'THAT'
                // THIS HAS ANOTHER CONTEXT IN THIS FUNCTION
                that.oRouter = sap.ui.core.UIComponent.getRouterFor(that);
                that.oRouter.navTo("side");
            }
        });
    }