canLoad redirect with @aurelia/router

vNext
1

I am using @aurelia/router instead of router-lite and would like to redirect a user to the “home page” if a certain condition is met.

main.js

import { RouterConfiguration } from '@aurelia/router'

Aurelia
  .register(RouterConfiguration.customize({
    useDirectRouting: false,
    useUrlFragmentHash: true,
    useHref: false
  }))

Im my-app.js I specify the routes.

import { IRouter, routes } from '@aurelia/router'

@routes( [
  { path: '', redirectTo: 'step-01' },

  { id: 'step-01', path: 'step-01', component: import('...')},
  { id: 'step-02', path: 'step-02', component: import('...') }
])

In step-02.js I am using the canLoad hook.

canLoad() {
    if (something) {
      return 'step-01'
    } else {
      return true
    }
  }

This gives an error:

Uncaught (in promise) Error: 'step-01' did not match any configured route or registered component name - did you forget to add the component ‘step-01’ to the dependencies or to register it as a global dependency?

What am I doing wrong?

1 Like
2

Is step-01 a root path? What happens if you specify /step-01?

3

Should be. Still get the same error:

Error: '/step-01' did not match any configured route or registered component name


Error: '#/step-01' did not match any configured route or registered component name
4

I am having the exact same problem. As a part of upgrading to alpha v33, I tried to switch from router-lite to @aurelia/router, but had to undo for the moment. Did you get any progress regarding this since last message?

5

No, unfortunately not.

6

Hey @Ivan. Did you have any progress on this? If not, I somewhat had progress with this issue and might be able to help.

1 Like
7

I took a different approach. Please do share, curios to see your solution.

8

This should work in the latest version of the router. You can now direct by providing a route name amongst other values.

1 Like
9

In my case, it was not working as in yours. So I reverted the upgrade and later upgraded to alpha41. The there, I fixed the problem by making sure all imports are coming from the same library. There was a mix up between used libraries basically. But also @dwaynecharrington points out that it should be working in the latest version anyway. So now, I am not as sure as I was when I prompted you that I might have a solution, whether if it was the inconsistent imports, a generic problem in the framework that got fixed in later alpha versions, or both :smiley:

I’m sorry :sweat_smile:

1 Like