12

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

cucuru
  • 3,456
  • 8
  • 40
  • 74

4 Answers4

25

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.

Vlad274
  • 6,514
  • 2
  • 32
  • 44
  • 1
    Thanks, I need to go "up", I tried this, but same result, it goes to the main page instead to the parent. – cucuru Jul 11 '18 at 15:03
  • @cucuru 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". – Vlad274 Jul 11 '18 at 15:12
  • thanks, that was my first choice and try to remove manually from url "/child" and it works – cucuru Jul 12 '18 at 06:35
  • You need not to do manually , problem seems to be in your router definition otherwise your `` should work. – eduPeeth Jul 12 '18 at 07:25
  • I mean in the browser to check if the router file was correct. I'm sharing my routing config in the original post – cucuru Jul 12 '18 at 09:43
2

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

Sunstrike527
  • 515
  • 1
  • 4
  • 17
1

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.

Wajahath
  • 2,827
  • 2
  • 28
  • 37
0

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

bguiz
  • 27,371
  • 47
  • 154
  • 243
Lewis99
  • 31
  • 1
  • 4