go back using routerLink

Question

I'm using routerLink to go back in my page.

Current route can have 3 levels:

myurl.com/parent
myurl.com/parent/child
myurl.com/parent/child/grandchild

also, I have some differents components, so it won't be always parent, it can be parent1, or parent2, also for child and grandchild, for example:

myurl.com/parent2/child1/grandchild2

what I want is always go to the previous level, for example:

myurl.com/parent/child/grandchild -> myurl.com/parent/grandchild

what I did is:

<button [routerLink]="['../'']">
       back
</button>

but it always navigate to "myurl.com"

how can I solve it?

As some users suggested, I'm sharing my routing configuration:

in app.routing.ts:

const APP_ROUTES: Routes = [
{
  path: '',
  canActivate: [LoggedInGuard],
  children: [
    {path: '', redirectTo: '/mainPage', pathMatch: 'full'},
    {path: 'parent', loadChildren: 'app/parent/parend.module#ParentModule'
]},
{path: '**', redirectTo: ''}
];

in parent.routing.ts:

const PARENT_ROUTES: Routes = [
 {path: '', component: ParentComponent},
 {path: ':id', component: ChildComponent},
];

if in the browser I wrote:

myurl.com/parent -> it works

but clicking the back button fails

Answer 1

If you're trying to navigate "up" one level, you're almost correct.

<a routerLink="..">Up</a>

This will navigate

myurl.com/parent/child/grandchild -> myurl.com/parent/child

---

However, if you want to truly navigate "back" like the browser's back button, you need to use javascript.

There are a variety of existing answers for that problem on this StackOverflow question

---

For anything more complicated, it will depend on exactly what you're trying to do - but it will likely require a click handler and some manual manipulation of the URL.

Answer 2

Try this one [routerLink]="['../child']"

Answer 3

This is specifically observed when it is a lazy-loaded module, and it was a known bug.

Angular 11: It works fine, out of the box.

@NgModule({
  imports: [RouterModule.forRoot(routes, {})], // relativeLinkResolution === 'corrected' by default
  exports: [RouterModule],
})
export class AppRoutingModule {}

Before Angular 11: use {relativeLinkResolution: 'corrected'} explicitly.

@NgModule({
  imports: [RouterModule.forRoot(routes, {relativeLinkResolution:'corrected'})],
  exports: [RouterModule],
})
export class AppRoutingModule {}

You can also set {relativeLinkResolution:'legacy'} to get the current behaviour you are facing.

Answer 4

If you are in http://localhost:4200/users/list and want to return a path use: ../ will return a path.

<a  routerLink="../{{user.id}}/edit">Update</a>

result: http://localhost:4200/users/2/edit