All geek questions in one place

Angular2 Redirect Route Does Not Change Browser URL

Trying to create my redirect route in my angular2 application.

But my problem is that when someone enters an invalid path, like "nopath", then the user is redirected to "HomeComponent", but url still saves "/ # / nopath"

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

Should I put an if in my HomeComponent constructor, which checks the current URL and changes its route to homcomomponent? Or am I missing something?

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 am not getting redirect to 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: '' }
];
+4
source share
3

Angular2.

, ... , !

:

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;
  }
}

, , , ?

+3

,

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo:'home'},  
   //<<<-----added redirectTo attribute

  { path: 'home', component: HomeComponent  },                
   //<<<----added this line


  { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
  { path: 'users', component: UserComponent, canActivate: [AuthGuard] },

  { path: '**', component: HomeComponent }   //<<<--- updated line
];
0

, , , href. - index.html:

<head>
  <meta charset="utf-8">
  <title>MyCoolApp</title>
  <base href=".">
</head>

href= "." . , href= "/" , .

<head>
  <meta charset="utf-8">
  <title>MyCoolApp</title>
  <base href="/">
</head>

So, now the routing work and all routes that do not match each other end on the path "**", and since "/" is used as the base url to search for * -bundle.js files, they will be found. I think that’s why, when you go to the “/”, everything works again.

0
source

Source: https://habr.com/ru/post/1665413/

More articles:


All Articles