RouterConfiguration case sensitivity question

#1

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 CLI - Visual Studio 2017/2019 Tools
#2

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

1 Like
#3

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.

#4

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
#5

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

1 Like
#6

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
#7

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

2 Likes
#8

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
#9

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

1 Like
#10

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

2 Likes
#11

Has there been any new information anywhere concerning this?

1 Like
#12

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

1 Like
#13

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
#14

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?

#15

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

#16

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