Routing to the same `pattern` but with different `args` ,`name` and `targets` - sapui5

Question

What I am trying to do is , the pattern in the routing is same but the target and name are different as:
"routes":[
{
"pattern": "spec/{Name}/{Action}", //{Name}=ABC {Action}=add
"name": "ABCSpecificationNew",
"target": "ABCSpecificationNew"
},
{
"pattern": "spec/{Name}/{Action}", //{Name}=ABCPlus {Action}=add
"name": "ABCPlusSpecificationNew",
"target": "ABCPlusSpecificationNew"
},
.....
],
I was trying to pass this way for Name,
var routerPath=Name+"SpecificationNew"; //getting `Name` by `Id` from `view`//
this.getRouter().navTo(routerPath,
{
Action: "Add", Name:Name
});
So from above, Name and Action are passed to pattern
"targets":[
"ABCSpecificationNew": {
"viewId": "abc",
"viewPath": "com.sample.view.employee",
"viewName": "ABCSpecificationConfigurationNew",
"parent": "home",
"controlId": "parentNavContainer",
"controlAggregation": "pages"
},
"ABCPlusSpecificationNew": {
"viewId": "abcplus",
"viewPath": "com.sample.view.employee",
"viewName": "ABCplusSpecificationConfigurationNew",
"parent": "home",
"controlId": "parentNavContainer",
"controlAggregation": "pages"
},
.....
]
Now when I am trying to hit the pattern ---> spec/ABCPlus/add
It is routing to ABCSpecificationNew instead of ABCPlusSpecificationNew,
To my knowledge, it should match the target and route to the same ,
but this is not happening in my case.
Even though pattern here are different for both cases, it is routing to the first route.
I have no idea why this is happening , every part in the view and controller I have confirmed with no mistakes and it must have happened only in routing,
Is there a way to achieve this , any help is appreciated..TIA

Answer 1

The curly bracket is a placeholder. The matching is solely based on the pattern. Therefore ANYTHING will match {Name}. Be it ABC, ABCPlus, DEF, CHEESE_NUGGETS, you name it.
When matching, the router will use the first target it finds. In your case ABCSpecificationNew.
If you only want to support exactly the two names ABC and ABCPlus I suggest the following:
"routes": [
{
"pattern": "spec/ABC/{Action}",
"name": "ABCSpecificationNew",
"target": "ABCSpecificationNew"
}, {
"pattern": "spec/ABCPlus/{Action}",
"name": "ABCPlusSpecificationNew",
"target": "ABCPlusSpecificationNew"
},
.....
],
Also if your action is always add (and the name and target of your route contain the word New it might make sense to hardcode the action also in your route definition, e.g. "pattern": "spec/ABCPlus/add".
Because right now someone could type in spec/ABC/delete and would also land in ABCSpecificationNew.

Answer 2

As per the routing is consider same patterns will not make any sense. So my suggestion for you is to use a single pattern like "pattern": "spec/{Name}/{Action}" with an extra parameter which will help you to decide the type of view you want to render ABCSpecificationConfigurationNew OR ABCplusSpecificationConfigurationNew.
Pattern
"pattern": "spec/{Name}/{Action}/{Type}"
"routes":[
{
"pattern": "spec/{Name}/{Action}/{Type}", //{Name}=ABC/ABCPlus - {Action}=add - {Type}= ABCSpecificationConfigurationNew OR ABCplusSpecificationConfigurationNew
"name": "ABCSpecificationNew",
"target": "ABCSpecificationNew"
}
.....
],
"targets":[
"ABCSpecificationNew": {
"viewId": "XYZ",
"viewPath": "com.sample.view.employee",
"viewName": "ABCSpecificationConfiguration", //single view to render the content based on the parameter Type
"parent": "home",
"controlId": "parentNavContainer",
"controlAggregation": "pages"
}
.....
]