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

Meisel

#37197382 Maybe this will help you – Amerce

thanks, I've already read this but not helped me :( – Meisel

Can you share your routing configuration. – Aegisthus

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.

Altheta

Thanks, I need to go "up", I tried this, but same result, it goes to the main page instead to the parent.<button mat-icon-button routerLink=".."> back </button> – Meisel

@Meisel In that case, I suspect you're are falling back to the "default route" of the application as if you had an invalid URL. Without seeing the specific URLs you're using it's hard to say, but I would recommend you try to navigate (in a new tab or window) directly to the route that is "up". – Altheta

thanks, that was my first choice and try to remove manually from url "/child" and it works – Meisel

You need not to do manually , problem seems to be in your router definition otherwise your <button [routerLink]="['../'']"> back</button> should work. – Aegisthus

I mean in the browser to check if the router file was correct. I'm sharing my routing config in the original post – Meisel

Answer 2

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

Topper

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.

Ley

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

Hurtless