Angular2 Child Component browser refresh redirects to Parent Component

Question

My application has 2 Parent components.

@Component({
  selector: 'my-app',
    directives: [ROUTER_DIRECTIVES],
  template: `
    <router-outlet></router-outlet>
`,
    providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
    { path : '/router/...', name:'Router', component: RoutingComponent, useAsDefault: true},
    { path : '/login', name:'Login', component: LoginComponent }
])

export class AppComponent implements OnInit{

    constructor(
        private _router: Router
    ){}

    ngOnInit(){
        if(localStorage.getItem("user")=== null) {
            this._router.navigate(['Login']);
        }
        else{
            console.log(" APP COMPONENT");
            this._router.navigate(['/Router', 'RegisterClient']);
        }
    }
}

When the user is logged in, the app redirects to the child component of Router, called RegisterClient, as it is the main page of the application. If the user is not logged in, the app redirects to LoginComponent.

My Router component has many child component's

@Component({
selector:'router',
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/routing.component.html',
providers: [AuthenticationService, MessageService]

})

@RouteConfig([
{ path : 'registerClient', name:'RegisterClient', component: RegisterClientComponent},
{ path : 'searchClient', name:'SearchClient', component: SearchClientComponent},
{ path : 'updateClient/:id', name:'UpdateClient', component: UpdateClientComponent},
{ path : 'registerMerchandise', name:'RegistMerc', component: RegisterMercComponent},
{ path : 'searchMerchandise', name:'SearchMerc', component: SearchMerchandiseComponent},
{ path : 'updateMerchandise/:id', name:'UpdateMerc', component: UpdateMercComponent},
{ path : 'registMaterial', name:'RegistMaterial', component: RegisterMaterialComponent},
{ path : 'searchMaterial', name:'SearchMaterial', component: SearchMaterialComponent},
{ path : 'updateMaterial/:id', name:'UpdateMat', component: UpdateMaterialComponent},
{ path : 'messages', name:'MessagesComponent', component: MessagesComponent}

])

The problem is, when I'm in any child Component, and I try refresh the page with the F5 or the browser button, the page is refreshed and redirected to RegisterClient Component always, and I want to refresh the child component and stay in the same page.

Anyone can help?

First) Check your '<router-outlet></router-outlet>' directive inside of parent component that should render children components or the main component, in case you shouldn't go deeper. Second) Check default paths, perhaps some redirection in some 'default' case. Third) Check all imports that handle routes. Fourth) Handle carefully ngOnInit(), perhaps it has some wrong behaviour: navigate[...] path available, exact route, etc. Suggestion))) Check this: angular-2-training-book.rangle.io/handout/routing/… — Felix Aballi

Swoox Swoox · Accepted Answer · 2017-08-22T06:22:50

You already working with localstorage.

Put an ID in the localstorage after a refresh your parent check on that ID and you switch to the right page.

Angular2 Child Component browser refresh redirects to Parent Component

1 Answers