AngularDart: Namespace of route names hierarchical

Question

Consider the following initialization of hierarchical routes (excerpt from the AngularDart tutorial):

router.root
  ..addRoute(
      name: 'add',
      path: '/add',
      enter: view('view/addRecipe.html'))
  ..addRoute(
      name: 'recipe',
      path: '/recipe/:recipeId',
      mount: (Route route) => route
          ..addRoute(
              name: 'view',
              path: '/view',
              enter: view('view/viewRecipe.html'))
          ..addRoute(
              name: 'edit',
              path: '/edit',
              enter: view('view/editRecipe.html'))
          ..addRoute(
              name: 'view_default',
              defaultRoute: true,
              enter: (_) =>
                  router.go('view', {'recipeId': ':recipeId'},
                      startingFrom: route, replace:true)));

While I understand that a subroute's path will be unique (being constructed from the paths of its ancestors), is the route name namespace hierarchical too or must the names be unique?

Answer 1

It's required that the route names are unique for all direct children of a given parent.

OK:

foo
   bar
   baz
qux
  foo
     bar
     baz

Not OK:

foo
   bar
   bar

In general it's recommended to have unique route names throughout, for better readability, although it's not a requirement.

When referencing a route, one must specify the full path of the route foo.bar.baz from the root, or provide a relative route anchor router.go('foo', parameters: {}, startingFrom: bar)

One place where non-unique route names can cause issues is with query parameters, as query parameters are prefixed with the route name (not the full path), and can cause leaking of values between routes with the same name (/foo?foo.param1=value). That said, query parameter support is a work-in-progress, so things might change.