23.06 Angular redirect component

You can use { path: '', pathMatch: 'full', redirectTo: '/home' }, to redirect routing to a different url. Here are all angular routing options.

But what if you want a component to decide what page you should go to, for example:

You have a mobile homepage and a PC homepage.

So you make a component that calculates where you should go:

{ path: 'Homepage', component: HomepageDeciderComponent },
{ path: 'Home/Mobile', component: HomePageComponent },
{ path: 'Home/Pc', component: GameListComponent },

and this HomepageDeciderComponent chooses to what homepage you should go with:

if (i) {
	this.router.navigate(['Home/Mobile']);
} else {
	this.router.navigate(['Home/Pc']);
}

This seems to work, but it has a small issue. Whenever you want to go back from website.com/Home/Pc top where you came from, you can’t. This is because you keep going to Homepage which immediately sends you back to Home/Pc. Luckily there is a way around this:

• Hold the back button in your browser, this shows the previous pages
• Replace the logic inside of HomepageDeciderComponent with the following:

if (i) {
	this.router.navigate(['Home/Mobile'], { skipLocationChange: true });
} else {
	this.router.navigate(['Home/Pc'], { skipLocationChange: true });
}

The second option fixes it by keeping the url in your browser /Homepage, but still loading the correct page like it is /Home/Pc or /Home/Mobile.