SAPUI5/OpenUI5 view not rendered after router navTo

Question

I'm creating SAPUI5 sample app with simple routing (SAPUI5/OpenUI5 v.1.22).

My main problem, which I'm trying to understand, why URL pattern changes and the onInit of target view controller is fired, but after nothing happens (onAfterRendering not fired), and I'm able to go to another page only after page reload.

Routing setup. Compontent.js, where router is initialized, is structured in following way:

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {

    return UIComponent.extend("sge.apps.app.Component", {

        metadata:{
            name : "Sample App",
            version : "1.0",
            includes : [],
            dependencies : {
                libs : ["sap.m", "sap.ui.layout"],
                components : []
            },

            rootView: "sge.apps.app.view.App",

            config: {
                resourceBundle: "i18n/i18n.properties"
            },

            routing : {
                config : {
                    routerClass : sap.ui.core.routing.Router,
                    viewType : "XML",
                    viewPath : "sge.apps.app.view",
                    targetControl: "app",
                    targetAggregation: "pages",
                    transition: "slide",
                    clearTarget : false,
                    bypassed: {
                        target: "notFound"
                    }
                },
                routes: [{
                    pattern: "",
                    name: "appHome",
                    view: "Home"
                },{
                    pattern : ":all*:",
                    name : "catchallDetail",
                    view : "NotFound",
                    transition : "show"
                },{
                    pattern: "notFound",
                    name: "appNotFound",
                    view: "NotFound",
                    transition : "show"
                }]
            }
        },

        init : function() {
            UIComponent.prototype.init.apply(this, arguments);

            var mConfig = this.getMetadata().getConfig();

            // always use absolute paths relative to our own component
            // (relative paths will fail if running in the Fiori Launchpad)
            var rootPath = jQuery.sap.getModulePath("sge.apps.app");

            // set i18n model
            var i18nModel = new sap.ui.model.resource.ResourceModel({
                bundleUrl : [rootPath, mConfig.resourceBundle].join("/")
            });
            this.setModel(i18nModel, "i18n");

            // set device model
            var deviceModel = new sap.ui.model.json.JSONModel({
                isTouch : sap.ui.Device.support.touch,
                isNoTouch : !sap.ui.Device.support.touch,
                isPhone : sap.ui.Device.system.phone,
                isNoPhone : !sap.ui.Device.system.phone,
                listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster",
                listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive"
            });
            deviceModel.setDefaultBindingMode("OneWay");
            this.setModel(deviceModel, "device");

            this.getRouter().initialize();
        }
    });
});

I have Home.controller.js of the Home.view.xml from where I try to navigate to another view, by pressing the button with event onDisplayNotFound:

sap.ui.define([
    "sge/apps/app/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("sge.apps.app.controller.Home", {
        onDisplayNotFound : function (oEvent) {
            this.getRouter().navTo("appNotFound");
        }
    });
});

BaseController.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/routing/History"
], function (Controller, History) {
    "use strict";

    return Controller.extend("sge.apps.app.controller.BaseController", {        
        getRouter: function () {
            return sap.ui.core.UIComponent.getRouterFor(this);
        },
        onNavBack: function (oEvent) {
            var oHistory, sPreviousHash;

            oHistory = History.getInstance();
            sPreviousHash = oHistory.getPreviousHash();

            if(sPreviousHash !== undefined) {
                window.history.go(-1);
            } else {
                this.getRouter().navTo("appHome", {}, true /*no history*/);
            }
        }
    });
});

NotFound.controller.js of target view NotFound.view.xml:

sap.ui.define([
    "sge/apps/app/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("sge.apps.app.controller.NotFound", {
        onInit: function () {
            console.log("onInit NotFound.view.xml");
        },
        onAfterRendering: function () {
            console.log("onAfterRendering NotFound.view.xml");
        }
    });
});

Answer 1

I had the same problem and I solved by adding this line in the configuration of the routing :

    "routerClass" : "sap.m.routing.Router",

And it has worked perfectly navigation.

"routing": {
        "config": {
            "routerClass" : "sap.m.routing.Router", 
            "viewPath": "es.seidor.view",
            "controlId": "App",
            "async" : "true",
            "clearTarget" : "true"
        }