Configuring href for routes with parameters

Help Requests
1

The documentation is a little slim on the expected format for href, especially when using route path parameters. The only example I see in the docs is href: '#blah', which isn’t helpful at all.

I have a similar issue to the issue defined here.

Ultimately, I need direct linking to routes in some cases, and there are multiple segments of the route that are parameters. Think of permalinks.

Like such: http://localhost:4000/u/someuser/p/post-title

This should correspond to routes defined as: u/:username/p/:slug

Here is how I actually define the routes:

File app.ts:


  configureRouter(config: RouterConfiguration, router: Router) {
    config.options.pushState = true;
    config.options.root = '/';
    config.map([
      { route: ['u/:username'], name: 'user', moduleId: PLATFORM.moduleName('./user/index'), nav: false, title: 'User Profile'},
    ]);

File: user/index.ts:


  configureRouter(config: RouterConfiguration, router: Router) {

    this.router = router;

    config.map([
      { route: [''], name: 'profile', moduleId: PLATFORM.moduleName('./profile.component'), nav: false, title: 'Profile'},
      { route: ['p/:slug'], name: 'post', moduleId: PLATFORM.moduleName('./post.component'), nav: true, title: 'Post'}
    ]);

  }

This, of course, yields the following error:

ERROR [app-router] Error: Invalid route config for "p/:slug" : dynamic routes must specify an "href:" to be included in the navigation model.

Setting nav: false (which makes sense, since they aren’t nav menu routes) on both routes still fails to load the route:

ERROR [app-router] Error: Route not found: 
error @ aurelia-logging-console.js?dc89:45
eval @ aurelia-logging.js?30fd:38
processResult @ aurelia-router.js?e32b:2205
eval @ aurelia-router.js?e32b:2165
Promise.then (async)
eval @ aurelia-router.js?e32b:2165
Promise.then (async)
AppRouter._dequeueInstruction @ aurelia-router.js?e32b:2114
eval @ aurelia-router.js?e32b:2107
AppRouter._queueInstruction @ aurelia-router.js?e32b:2104
eval @ aurelia-router.js?e32b:2021
Promise.then (async)
AppRouter.loadUrl @ aurelia-router.js?e32b:2021
BrowserHistory._loadUrl @ aurelia-history-browser.js?d627:262
BrowserHistory.navigate @ aurelia-history-browser.js?d627:201
DefaultLinkHandler._this.handler @ aurelia-history-browser.js?d627:48

Two questions

  1. First, how would an href be defined for routes with parameters in order to get past this error?

  2. Second, why didn’t this error occur for the parent route u/:username?

2

I think I might have found my problem. I had a configureRouter() method defined on my component. Removing it resolved my initial route not found error.

    configureRouter(config: RouterConfiguration, router: Router) {
        this.router = router;
    }
3

I’ve been thinking. Why does the presence of configureRouter change the routing behavior if the RouterConfiguration hasn’t been appended with additional child route. I would think that the route would just end at that point.

4

configureRouter() defines a child router (by convention). Every child router expects a default/fallback route plus a viewport!

1 Like