Redirect to a new page in Angular 2 Routing

UPDATE: The whole router configuration code in this answer is for a router deprecated and removed in about 6/2016

I think what you want are child routes - see Plunker

Updated Plunker with navigation moved to Page1

where the parent route allows to switch between Page1 and Page2, Page1 allows to switch between About and Contact and Page2 only has User.

Page2 could also be UserComponent directly, only if this page should support more than one component, it's necessary to make it a component with child-routes.

You can of course navigate between User and for example About with

router.navigate(['/Page1', 'About']);router.navigate(['/Page2', 'User']);

import {Component, Directive, Output, EventEmitter} from 'angular2/core'import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';@Component({  selector: 'contact',  directives: [],  template: `  <h2>contact</h2>`})export class ContactComponent {}

@Component({  selector: 'about',  directives: [],  template: `  <h2>about</h2>`})export class AboutComponent {}

@Component({  selector: 'user',  directives: [],  template: `  <h2>user</h2>`})export class UserComponent {}

@Component({  selector: 'page1',  directives: [ROUTER_DIRECTIVES],  template: `  <h2>page1</h2>  <router-outlet></router-outlet>`})@RouteConfig([    {path: '/about', name : 'About' , component : AboutComponent, useAsDefault: true},    {path : '/contact', name : 'Contact' , component : ContactComponent}])export class Page1 {}@Component({  selector: 'page2',  directives: [ROUTER_DIRECTIVES],  template: `  <h2>page2</h2>  <router-outlet></router-outlet>`})@RouteConfig([    {path: '/user', name : 'User' , component : UserComponent, useAsDefault: true},])export class Page2 {}

@Component({  selector: 'my-app',  directives: [ROUTER_DIRECTIVES],  template: `  <h2>Hello {{name}}</h2>  <a href="#" [routerLink]="['/Page1','About']">About</a>  <a href="#" [routerLink]="['/Page1','Contact']">Contact</a>  <a href="#" [routerLink]="['/Page2','User']">User</a>  <router-outlet></router-outlet>`})@RouteConfig([    {path: '/page1/...',name : 'Page1' , component : Page1 , useAsDefault: true },    {path: '/page2/...', name : 'Page2' , component : Page2 },])export class App {  constructor() {    this.name = 'Angular2';  }  }

I had similar requirement where i had to go on new page after clicking on button.Let's say we have components trainer,admin,trainee,footer,header and login.

In our Appcomponent i have

<header></header><login></login><router-outlet></router-outlet><footer></footer>

now when i route to new page after login what will happen is new page will come but my original login page still there and new page will come under that log in page, because we have

<router-outlet></router-outlet>

in template of Appcomponent.To get rid of this problem iadded <header></header> and <footer></footer> at beginning and end of each page.Now in Appcomponent we have just

<router-outlet></router-outlet>.

so when we route to new page it will occupy whole page.

The simple solution is just use router-outlet in app.component.html instead of using it in the html where your UI code is written , It avoids new page coming under the original page. make sure that you are not writing any code in app.component.html

for example if your main html code is written in home.component.html and you have to route to page connections.component.html then you can do as follows :

index.html :

<app-root></app-root> // this will route you to the app component from index

app.component.html :

<router-outlet></router-outlet> // this will load the new page code in app.component.html home.component.html:

<a routerLink =['/connection'] > Add connection </a> // routes to connection.htmlU need not write router-outlet in home.component.html