Router Outlet displays more than 1 component - html

Question

I am having trouble seting up the navigation of my app. For some reason the router outlet i have set keeps displaying the components even after clicking a routerlink to another component, it just show them on after the other and if i keep clicking de links the tables(thats what my components are) just are displayed one more time on the view.
That's my sidenav:
<ul id="sideNav" class="side-nav">
<li>
<div class="square " id="logoContainer">
<img src="../../assets/img/{{brand}}Logo.jpg" id="logo" class="backImg">
</div>
</li>
<li><a routerLink="/admRegiones">Inicio<i class="material-icons">home</i></a>
</li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Regiones<i class="material-icons" style="padding-left: 15px">terrain</i></a>
<div class="collapsible-body">
<ul>
<li><a routerLink="/admRegiones" class="waves-effect waves-blue"><i class="material-icons right" style="padding-left: 10px">add_location</i> Administrar regiones </a></li>
</ul>
</div>
</li>
</ul>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Locaciones<i class="material-icons" style="padding-left: 15px">map</i></a>
<div class="collapsible-body">
<ul>
<li><a routerLink="/buscarLocacion" class="waves-effect waves-blue"><i class="material-icons right" style="padding-left: 10px">location_searching</i>Ir a locación </a></li>
<li><a routerLink="/admLocaciones" class="waves-effect waves-blue"><i class="material-icons right" style="padding-left: 10px">add_location</i> Administrar locaciones </a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
This my routes:
RouterModule.forRoot([
{
path: 'admLocaciones',
component: AdmLocacionesComponent
},
{
path: 'buscarLocacion',
component: BuscarLocacionComponent
},
{
path: 'admRegiones',
component: AdmRegionesComponent
}
])
Here my component to display(both admRegiones and admLocaciones are practically the same):
<div class="container col s8"style="padding-top: 4%;">
Modal <table class="highlight striped center" id="tablaLocaciones" onload="loadTablaLocaciones()">
<hr>
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Región</th>
<th>Editar</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody id="locacionesBody">
</tbody>
</table>
</div>
and this my app-component template:
<app-header></app-header>
<div id="body">
<router-outlet></router-outlet>
</div>
<app-locacion></app-locacion>
<app-side-nav></app-side-nav>