TypeError: oRouter.getRoute(...) is undefined

Question

I am new to SAPUI5 and I would like to navigate to the details of an object on a second view, but I have an error:

TypeError: oRouter.getRoute (...) is undefined

Can someone help me?

Airport.controller.js

onInit: function() {
  jQuery.sap.require("sap.m.ObjectAttribute");
  jQuery.sap.require("sap.m.MessageBox");
  var oList = this.getView().byId("List01");
  oList.bindItems({
    path: "JSON>/products",
    template: new sap.m.StandardListItem({
      type: "Navigation",
      title: "{JSON>fields/aeroport}",
      press: [this.onPress, this],
    }),
  });
},

onPress: function(oEvt) {
  var oItem = oEvt.getSource();
  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
  var temp = oItem
    .getBindingContext("JSON")
    .getPath()
    .substr(10);
  oRouter.navTo("Detail", {
    airportPath: temp,
  });
},

Detail.controller.js

onInit: function() {
  var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
  oRouter.getRoute("detail").attachPatternMatched(this._onObjectMatched, this);
},

_onObjectMatched: function(oEvt) {
  this.getView().bindElement({
    path: "/products/" + oEvt.getParameter("arguments").airportPath,
    model: "JSON",
  });
},

Detail.view.xml

<mvc:View
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  controllerName="SAPUI5CoolProject.controller.Detail"
>
  <App id="Detail">
    <Page
      title="Airport Detail"
      showNavButton="true"
      navButtonPress="goBackOtherAirport"
    >
      <ObjectHeader title="{JSON>products/fields}"/>
    </Page>
  </App>
</mvc:View>

manifest.json

{
  "pattern": "Detail/{airportPath}",
  "name": "Detail",
  "target": ["Detail"]
}

Answer 1

oRouter.getRoute("detail") → oRouter.getRoute("Detail")

Since the API getRoute awaits the name of the route defined in the app descriptor, and because JS is case-sensitive, the exact same string literal has to be passed as the argument.