How to use navigateToRoute

Help Requests
1

I have a search page under /search/, configured in the App.js like this

configureRouter(config, router) {
  config.options.pushState = true;
  config.map([
    { route: '',       moduleId: PLATFORM.moduleName('./categories'),   title: 'Categories'},
    { route: 'search', moduleId: PLATFORM.moduleName('./search'), title: 'Search', name: 'search' }
]);

this.router = router;

}

Then on the search page itself, in search.js I want to handle the search form submit to navigate to url with the search term in the query string, e.g. /search/?query=xyz

I’m not sure if I need to create a new child router, or how to get hold of the router I created in app.js above?

In app.js I can do

this.router.navigateToRoute('search', {query:'foo:bar'});

and this seems to work fine, but I can’t seem to get hold of that router in search.js.
Thanks,

Will

1 Like
2

Use dependency injection to explicitly provide the router to the page. There might (emphasis on might) be other methods which involve the store plugin or some kind of service factory but I have no familiarity with them.

1 Like
3

Thanks. I thought about trying dependency injection before, but I was unsure how to create and register an instance of the router. Does this need to happen in the main configure(aurelia) method? Do I use a configureRouter(config, router) method here or do I need to manually create the router and configure it (create a new RouterConfiguration too?), then aurelia.container.registerInstance(Router, router) all in the main.js. Or can I registerInstance in the app.js, maybe within another configure(aurelia) method there?

1 Like
4

What does your search template look like? Is there any <router-view/> in it?

5

In plain ES6:

 import {inject} from 'aurelia-framework';
 import {Router} from 'aurelia-router';
 
 @inject(Router)
 export class MyClass {
      constructor(router) {
           this.router = router;
      }
 
      someMethod() {
            this.router.navigateToRoute(.....);
      }
 }
1 Like
6

Thank you so much. @jeffgrann That worked for me but I thought I’d tried it already.
I think I might have had a typo when I tried this before @inject(router) maybe, but I also assumed you’d have to call aurelia.container.registerInstance to specify which router instance is used to inject?
Is there some way aurelia automatically registers the base router for dependency injection (and not any other child routers I might create later).
@bigopon No, I don’t yet have any <router-view/> on my search page.

Now I just need to handle Forward and Back browser buttons so that when user navigates back to search?query=foo I can do the appropriate search. I’ll see if I can figure it out…
Cheers!

1 Like