CODEWITHSUNDEEP
angularroutes
Harifrais
Harifrais

Reputation: 47

Angular 8: page redirect to home when refresh base url

In my angular project i have a menu dashboard , when login it redirects to dashboard but when i remove that dashboard from URL (i.e)before localhost:4200/dashboard, after removed localhost:4200, when refresh how to i navigate to dashboard again?

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: DashboardComponent},
{ path: '**', redirectTo: 'login' ,pathMatch: 'full' }

Upvotes: 0

Views: 10133

Answers (3)

sammani95
sammani95

Reputation: 104

Change your router config as below.

  import { DashboardComponent} from '..path to your dashboard component';
  import { LoginComponent } from '..path to your login component';

  const routes: Routes = [
  { path: '', redirectTo: '/dashboard' ,pathMatch: 'full'} 
  { path: 'dashboard', component: DashboardComponent}, canActivate:[AuthGuard]}
  { path: 'login', component: LoginComponent },
  ]

Upvotes: 0

Suhas Parameshwara
Suhas Parameshwara

Reputation: 1454

https://angular.io/guide/router#the-default-route-to-heroes

You can change your router config something like below,

RouterConfig = [
  { path: '**', redirectTo: '/dashboard'},
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent }
];

Add this in your router config and it should work as expected.

Basic routing example => https://stackblitz.com/edit/angular-router-basic-example-11fgob

Upvotes: 0

Sravan
Sravan

Reputation: 18647

You can use redirectTo

According to the Angular documentation for the default routing

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{ path: 'dashboard', component: DashboardComponent},
{ path: '**', redirectTo: 'login' ,pathMatch: 'full' }

This route redirects a URL that fully matches the empty path to the route whose path is '/dashboard'.

After the browser refreshes, the router loads the DashboardComponent and the browser address bar shows the /dashboard URL.

Upvotes: 0

Related Questions