Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 Redirect route doesn't change browser url

Trying to create my redirect route in my angular2 app.

But my problem is that when someone enter an invalid path like 'nopath' then user is redirected to the 'HomeComponent' but the url still keep the '/#/nopath'

I want the redirectTo route to change the url too! How should I achieve this?

Should I put an if in my HomeComponent constructor that check the current url and change his route to homecomponent? Or there is something I am missing?

Routes:

const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
  { path: 'users', component: UserComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true});

EDIT:

Tried this, but i doesn't get the redirect to the home component

const routes: Routes = [
  { path: '', pathMatch: 'full' , redirectTo: 'home' },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
  { path: 'users', component: UserComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '' }
];
like image 961
Vince Avatar asked Dec 31 '16 15:12

Vince


1 Answers

For now, i didn't find any better way than hacking the Angular2 Router.

Here is my solution, it's not a beautifull way to fix the problem... but at least it work as i want!

Routes:

const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
  { path: 'users', component: UserComponent, canActivate: [AuthGuard] },
  { path: '**', component: HomeComponent, canActivate: [RedirectToHomeGuard] }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });

RedirectToHomeGuard:

@Injectable()
export class RedirectToHomeGuard implements CanActivate {

  constructor(private router: Router) { }

  canActivate() {
    this.router.navigate(['/']);
    return false;
  }
}

You guys think it could be a good solution?

like image 111
Vince Avatar answered Sep 20 '22 22:09

Vince