1

I'm trying to make a simple application using Aurelia, and I don't like that my routes are matching urls with extra content on the end.

My router configuration is:

configureRouter(config, router) {
  config.title = 'Aurelia';
  config.map([
    { route: '', redirect: 'players' },
    { route: 'players', name: 'players', moduleId: 'components/players/players', nav: true, title: 'Players' }
  ]);
  this.router = router;
}

I only want #/players to route to the players component. How can I keep things like #/players/extra/url from also being routed?

Improve this question
1

1 Answer 1

Reset to default
4

That's kind of how route-recognizer works. It stops looking at the remainder of the url once it finds a fully matching leaf route. In contrast, if you had another route #/players/foo for example, then #/players/extra would give you an error Route not found: extra.

With that in mind, you could add an additional route config with a child route matcher to catch the extra parts:

{ route: 'players/*path', redirect: 'players' }

Then, anything the user adds after #/players/ will simply be removed and they'll still end up at that page.

Be careful though with this sort of thing as it will break any child routes you might have and it might not be the behavior users expect. Even here on stack overflow you can add /extra/stuff in the address bar and you land on the same page.

Improve this answer
4
  • Thanks, this seems the right solution, though I route to a not-found page rather than redirect. That's interesting about extra things in url on stackoverflow - I was worried it would be bad style to have multiple URL's to the same page.
    – user3885964
    Commented Mar 12, 2018 at 8:33
  • Nah it's not bad style, though I agree it can feel a bit ugly. Most client-side route recognizers are some form of Nondeterministic Finite Automata and they all work roughly the same way (if you're interested: nathanhammond.com/route-recognizer). Ultimately having multiple urls to the same page only improves accessibility.
    – Fred Kleuver
    Commented Mar 12, 2018 at 8:43
  • The approach is exactly right. I think the cause is slightly different, though. Aurelia lazy loads child routers, so once it finds a partially matching leaf route, it forwards the rest of the route to the child router, even if none exists. I don't think there's a good way around that at the moment.
    – Matthew James Davis
    Commented Mar 17, 2018 at 7:41
  • @MatthewJamesDavis Isn't my description of the cause simply incomplete rather than incorrect? I'm trying to fully understand it now. So: route-recognizer stops looking at the remainder of the route once a match is found. It ignores extra/url and lets any child router's route-recognizer handle that. The page is loaded, no configureRouter() is present; no router or route-recognizer gets configured, and so the extra/url is simply not handled by anything and effectively gets ignored. Is this correct?
    – Fred Kleuver
    Commented Mar 17, 2018 at 12:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.