Relative routing in Ionic 4

Ionic Framework ionic-v3
#1

As per Mike Hartington’s suggestion on Github, I’ve moved my question here.

Ionic Ionic 4 beta.8, when I use relative routing to go from page A to page B like so:

openPageB(id) {
   this.router.navigate(['b', id], { relativeTo: this.route });
}

and then go back to page A (via the browser back button or an ion-back-button ), calling openPageB again does nothing. When I use absolute routes everything works normally.

I’ve created a repository to demonstrate the issue here: https://github.com/doender/routingError

Mike suggests that using relative routing here is incorrect. Could somebody explain why navigation succeeds the first time and why relative routing is used incorrectly in this case?

3 Likes
#2

Same problem here, this is not working and putting the base routes all the time is really not ideal.
I’ve come here after having reached the issue where you commented on github.
Did you open a new one?

#3

Did you get a solution for it yet?

#4

Same problem here, it’s quite frustrating…

#5

Same. I agree it’s a bug and not caused by incorrect usage of relative routing (according to the Angular docs)

#7

Has there been any update on this issue?

#8

navigating with relative routes is still not working.

Ionic 4.0.1
Angular 7.2.2

anyone got this to work?

#9

Also not working for me. Is there any other way to relatively navigate to a route within tabs in ionic 4?

#10

I found a workaround on how to do this.

// Ask the router to build up the UrlTree
const relativeRoute = this.router.createUrlTree(['success'], {
	relativeTo: this.route
});

// Private the UrlTree directly
this.navController.navigateForward(relativeRoute);

It works for me and is thousand times better this way!

1 Like