title: Routing redirecting to root
body: <p>I am trying to route using <code>Router.navigate</code> method. I followed the instructions to the letter, but when I route via API, its reloading the root page.</p>
  
  <p>In my <code>RootComponent</code> I am trying to use  </p>
  
  <blockquote>
    <p>this._router.navigate(['ABC', 'Page1']); which should redirect me to application/abc/xyz</p>
  </blockquote>
  
  <p>But if I directly visit <code>application/abc/xyz</code> through my browser, it is working seamlessly</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import {Component} from "angular2/core";
  import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from "angular2/router";
  import {RootComponent} from "./components/root.component";
  import {Page1Component} from "./components/page1.component";
  
  
  @Component({
      selector: 'app',
      template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;',
      directives: [ROUTER_DIRECTIVES],
      providers: [
          ROUTER_PROVIDERS
      ]
  })
  
  @RouteConfig([
      {
          path: '',
          name: 'Root',
          component: RootComponent,
          useAsDefault: true
      },
      {
          path: '/abc/...',
          name: 'ABC',
          component: ABCComponent
      }
  ])
  
  export class AppComponent {
  }
  </code></pre>
  
  <p><strong>ABCComponent</strong></p>
  
  <pre><code>@Component({
      selector: 'abc',
      template: '&lt;router-outlet&gt;&lt;/router-outlet&gt;',
      directives: [ROUTER_DIRECTIVES]
  })
  
  @RouteConfig([
      {
          path: '/xyz',
          name: 'Page1',
          component: Page1Component
      }
  ])
  export class ABCComponent{
  
      constructor(private _router:Router){
      }
  
  }
  </code></pre>
  
  <p><strong>Page1Component</strong></p>
  
  <pre><code>import {Component} from "angular2/core";
  import {Router} from "angular2/router";
  
  @Component({
      selector: 'page1',
      template: '&lt;h1&gt;Page1&lt;/h1&gt;'
  })
  
  export class Page1Component{
  
      constructor(private _router:Router){
      }
  }
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>To explain it even simpler terms</p>
  
  <pre><code>                              Application (2 routes at root level)
                                    |                        |
             Default ("/") - Root Component              /abc/ ABC Component
                                                             |
                                                         /abc/xyz Page1 Component
  </code></pre>
  
  <p>What I am trying to do is, navigate to Page1 from Root Component.</p>
  
  <p><strong>Solution</strong></p>
  
  <p>After Reverse enineering from S.alem plunkr, here is the solution</p>
  
  <p><a href="http://plnkr.co/edit/F1p6aQNJ7lREHCiVnKEP?p=preview" rel="nofollow">http://plnkr.co/edit/F1p6aQNJ7lREHCiVnKEP?p=preview</a></p>