Navigation to dynamic routes does not work properly

[euglv]

I'm submitting a bug report

• Library Version:
  1.3.0

Please tell us about your environment:

• Operating System:
  Windows [10]

• Node Version:
  8.11.2

• NPM Version:
  6.9.0

• Aurelia CLI OR JSPM OR Webpack AND Version
  CLI 1.0.0-beta.7

• Browser:
  Chrome

• Language:
  ESNext

Current behavior:
Documentation states that it is possible to configure moduleId using navigationStrategy function.
But framework does not respect changes of instruction.config.moduleId when navigationStrategy function is called second time.

Expected/desired behavior:
Framework should watch moduleId changes after navigationStrategy function is called.

I am trying to display different module when key parameter is present in a query string.
http://example.com/ - should display 'landing' module, but
http://example.com/?key=12345 should display 'search' module
Here is my router config:

export class App {
  configureRouter(config, router) {
    const homeStratagy = (instruction) => {
      if (instruction.queryParams.key) {
      	instruction.config.moduleId = 'search';
      } else {
      	instruction.config.moduleId = 'landing';
      }
  	  console.log('homeStratagy:', instruction);
    };

    config.map([
      {route: '', name: 'home', navigationStrategy: homeStratagy}
    ]);

    this.router = router;
  }
}

Here is gist illustrating the problem: https://gist.run/?id=11d2f6926dc18f19fd9f7dd9f910bbcf
If I run the above sample locally (not using gist) - I can see that line this.router.navigateToRoute('home', {key: Math.random()}); changes the browser URL, but does not reload current module. If I open this new url in a new tab - I will see the correct seach module.

[bigopon]

@euglv thanks for filing this.

@EisenbergEffect please help move this to Router.

@davismj This case falls into no-change activation strategy even when params got changed. I was debugging and noticed that both current/previous instructions have no query parameters in it. Do you have any guesses?

[bigopon]

On a second thought, from the look of the code, what has been changed is queryParams, so the router doesn't try to detect that changes and turn the url change into a no-change instruction, thus gave the "not doing anything" impression.

@davismj @fkleuver @EisenbergEffect What do we do in case of only query params change? Do we have any similar issues?

[bigopon]

@euglv you can add a method determineActivationStrategy on App and return 'invoke-lifecycle' to signal router to do something. By default only path parameters will trigger routing pipeline, not query parameters

[euglv]

@bigopon Adding determineActivationStrategy does not solve the problem.

But I have solved the issue by changing navigationStrategy function implementation:

    const homeStratagy = (instruction) => {
      if (instruction.queryParams.key) {
      	instruction.config.moduleId = 'search';
      } else {
      	instruction.config.moduleId = 'landing';
      }
      // These lines fixed the issue:
      if (instruction.config.viewPorts)
        instruction.config.viewPorts.default.moduleId = instruction.config.moduleId;
      console.log('homeStratagy:', instruction);
    };

Here is updated gist with working sample:
https://gist.run/?id=4fde41f2bba1c2fd1914e09baad02a08

When navigationStrategy function is called for the first time - instruction.config.viewPorts is null, but when it is called for the second time - instruction.config.viewPorts.default.moduleId is filled with previous moduleId.

[davismj]

@euglv have a look at this article and let me know if this seems like it has a solution for you

http://davismj.me/blog/dynamic-routing/

[StrahilKazlachev]

Duplicate of #289 ?

[euglv]

@davismj Hi, thank you for help. I already found the solution:

inside navigationStrategy function I should configure moduleId in two places:
instruction.config.moduleId
and
instruction.config.viewPorts.default.moduleId