RouterConfiguration case sensitivity question

Testing a demo app I found this effect:

The default url obviously works fine:

https://{localhost}/App/about-us/our-company

Aurelia routes using a different case also work, such as:

https://{localhost}/App/About-Us/Our-Company

However, this fails:

https://{localhost}/app/about-us/our-company

A change to the case that hits the RouterConfiguration options.root fails in Aurelia but works fine in MVC. Is this as expected?

1 Like

Aurelia router has an option to not ignore cases. Did you try that? https://aurelia.io/docs/routing/configuration#case-sensitive-routes

1 Like

No I did not! Many thanks!

Does this apply to the:

config.options.root = ‘/App’;

?

It is only this root that is failing. The others are fine.

Just looked at this. It states that

By default Aurelia’s routes are not case sensitive.

But the issue is with the RouterConfiguration options.root acting in a case sensitive way.

  configureRouter(config: RouterConfiguration, router: Router): void {
config.title = 'Aurelia';
config.options.pushState = true;
config.options.root = '/App';
config.map([
  { route: ['', '/home'], name: 'home', moduleId: PLATFORM.moduleName('./pages/home'), nav: true, title: 'Home'},
  { route: '/about-us', name: 'about-us', moduleId: PLATFORM.moduleName('./pages/about-us'), nav: true, title: 'About Us'},
  { route: '/about-us/our-company', name: 'our-company', moduleId: PLATFORM.moduleName('./pages/about-us/our-company'), nav: true, title: 'Our Company'},
  { route: '/about-us/link-below-our-company', name: 'link-below-our-company', moduleId: PLATFORM.moduleName('./pages/about-us/link-below-our-company'), nav: true, title: 'Link Below Our Company'},
  { route: '/about-us/people', name: 'people', moduleId: PLATFORM.moduleName('./pages/about-us/people'), nav: true, title: 'People'},
  { route: '/services', name: 'services', moduleId: PLATFORM.moduleName('./pages/services'), nav: true, title: 'Services'},
  { route: '/contact-us', name: 'contact-us', moduleId: PLATFORM.moduleName('./pages/contact-us'), nav: true, title: 'Contact Us'},
  { route: '/link-that-is-hidden', name: 'link-that-is-hidden', moduleId: PLATFORM.moduleName('./pages/link-that-is-hidden'), nav: true, title: 'Link that is not hidden'},
]);
this.router = router;

}

1 Like

That’s interesting. But I’m not sure what should be done for this.

1 Like

Yes, I have not found anything to get around this as yet. It seems to be either an unfortunate limitation, a lack of understanding or I am missing something.

1 Like

@davismj any idea how to workaround this issue? Or is it a new feature request?

2 Likes

That’s a new feature. The root is specifying a part that lies outside the hands of the router.

I’m not sure it would be too difficult. Let’s take a look.

2 Likes

Thanks for the clarification.
I did not intend to cause more work!

1 Like

I think its good you uncovered this use case. Having the router feature heavy is certainly a good thing :wink:

2 Likes

Has there been any new information anywhere concerning this?

1 Like

This post by @si2030 is directly a result of this unfortunate issue:

1 Like

It’s in review mode, after that gets merged, will probably have a look at the issue. It will be significantly easier with the whole code base in TS

1 Like

Excellent news, I did not know that. Many thanks.
Can you point me to the issue so that I can check how it was addressed?

It was not yet addressed. I just meant that that refactor should be released first, then I can start looking into it.

I am sorry, I misunderstood. I will check the link periodically to see if things change.