title: Issues with Angular4 routing with Child routes stacking on each other
body: <p>I'll just get to it:</p>
  
  <p>//App Routing Module</p>
  
  <pre><code>const appRoutes: Routes = [
      {
          path: '',
          redirectTo: 'home',
          pathMatch: 'full'
      },
      {
          path: 'home',
          component: HomeComponent,
          children: [
              {
                  path: '',
                  redirectTo: 'index',
                  pathMatch: 'full'
              },
              {
                  path: 'index',
                  component: IndexComponent,
              },
              {
                  path: 'about',
                  component: AboutComponent,
              },
              {
                  path: 'contact',
                  component: ContactComponent,
              },
              {
                  path: 'login',
                  component: LoginComponent,
              },
              {
                  path: 'register',
                  component: RegisterComponent,
              },
              {
                  path: "**",
                  component: NotfoundComponent
              }               
          ]
      },
  
  ];
  </code></pre>
  
  <p>Building my routes upon this configuration, when I navigate to routes using for example ... </p>
  
  <pre><code>&lt;a [routerLink]="['./login']"&gt; Login &lt;/a&gt;
  </code></pre>
  
  <p>Each route I navigate to stack on top of each other, what's causing this?</p>
  
  <p>//App Component html</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
      &lt;router-outlet&gt; &lt;/router-outlet&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>// Home component html (shortened version)
      ### This place is the navigation and i made it stationery, so every other 
      route can load underneath it
      
          
               Login 
               Register 
               Contact 
          
      </p>
  
  <pre><code>//I load children route in here
  
  &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;router-outlet&gt; &lt;/router-outlet&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  ### This is the footer, Also made stationery, so it appears in every other
  ### route that loads above
  
  &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;footer&gt; &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>