Angular2 RouterLink breaks routes by replacing slash with %2F
Solution 1
So I found the solution thanks to the Angular2 Issues page on Github (thanks Günter!).
My route was configured like this:
({
path: "/:page",
component: Page,
name: "Page"
}),
but instead should have been
({
path: "/*page",
component: Page,
name: "Page"
}),
Difference is the *
wildcard in front of page
.
I created this issue
Solution 2
Instead of trying to use strings with slashes in routerLink, we simply let the router handle it in the component.
<a (click)="goToPage(url)">Link</a>
url = 'group/8';
goToPage(url) {
this.router.navigateByUrl(url);
}
Solution 3
You need to replace comma(,) with (+) like this
Wrong => <a [routerLink]="['/Page', page.url]" class="list-group-item">{{ page.title }}</a>
Right => <a [routerLink]="['/Page' + page.url]" class="list-group-item">{{ page.title }}</a>
Solution 4
If the path was something like
pathServedByTheController = 'foo/bar'
then in the view I can do something like
<my-button (click)="onEmitCta()" [routerLink]="['/'].concat(pathServedByTheController.split('/')).concat('')" class="banner-cta inverse shadow">NAVIGATE</my-button>
This works nicely to me!
Kevin Sleegers
Updated on July 24, 2022Comments
-
Kevin Sleegers over 1 year
Since the latest Angular2 version (2.0.0-beta.14) it is possible to have query parameters that contain multiple slashes, like /foo/bar.
This works great, however whenever I use a parameter with multiple slashes within a RouterLink link, it escapes the
/
with%2F
causing the routes to not work anymore on reload.My link looks like this:
<a [routerLink]="['/Page', {page: page.url | slug}]" class="list-group-item">{{ page.title }}</a>
Inside of the 'slug' pipe I even
URIDecode
the string, and when I log it it is correct. It would log something like/pages/level-1/
, but when I inspect the actuala
tag on the page it sayshref="/pages%2Flevel-1"
.I'm pretty clueless, because even when I print the value of
{{ page.url | slug }}
within my HTML template, it returns the url with slashes. -
Günter Zöchbauer about 8 yearsSimon Green (CaptainCodeman) is always a great source of knowledge!
-
Craig about 5 yearsI can't get this to work with child routes. As soon as I put the * in there, it stops setting the parameter in the code.
-
AsGoodAsItGets almost 5 yearsIndeed, this doesn't work, not anymore at least. I'm using Angular Router 7.2.14. And I don't see how this could have ever worked, because once you put the star (*) in front of the parameter, it's not a parameter anymore, but just a string with a wildcard.
-
Denis Evseev almost 4 yearsit won't work for angular-universal because it replaces all router links with <a href
-
Wen over 3 yearsThanks @Praveen. I tried different ways, your answer is the easiest and best way to solve this issue.
-
Rajkumar M over 3 yearsThanks. Finally I used calling a method from a tag and used location.back(). goBack(): void { this._location.back(); }
-
Jens Alenius over 3 yearsRemember that this will this solution will disable the rightclick feature 'Open in new tab' that many user expects.
-
Black Kinght about 2 yearsyour answer works for me ( in my case I am trying to get URL from function and append the string result to a prefix like ( <a [routerLink]="['/Page' + getUtlFunction() ]" class="list-group-item">{{ page.title }}</a> ) )