Why my router navigate function doesn't work in angular 8?

Question

I'm trying to redirect to another component like this:

HomeComponent

  checkUrl(reference) {   
    if (reference != this.ref) {
      this.router.navigate(['/еrror']);
    }
  }

here is my router module

const routes: Routes = [
  { path: '', component: DefaultComponent },
  {
    path: '',
    children: [
      { path: ':dlr/:id/:ref', component: HomeComponent },
      { path: 'error', component: ErrorPageComponent },
    ]
  },
  { path: '**', redirectTo: '', pathMatch: 'full' }

];

right now I'm in the HomeComponent and want to go to the error page.

this.router.navigate(['/еrror']) this leads me to the DefaultComponent

try `this.router.navigate(['еrror']);` – Apr 23 '20 at 09:47 — , Apr 23 '20 at 09:47
already tried this way and the result is the same. – Ivilin Stoyanov Apr 23 '20 at 09:48 — Ivilin Stoyanov, Apr 23 '20 at 09:48

score 2 · Accepted Answer · answered Apr 24 '20 at 10:24

2

 this.router.navigate(['/error'], { relativeTo: this.activatedRoute });

adding relativeTo it worked for me.

answered Apr 24 '20 at 10:24

Ivilin Stoyanov

377
3
17

score 1 · Answer 2 · answered May 18 '20 at 14:29

Adding details to a previously deleted answer -

As it is a child to child navigation, you can try adding relativeTo: this.activatedRoute tag. You can find more about its syntax and usage here relativeTo in the documentation. This is basically similar to '../' type of notations that we use for navigation in general while trying to specify the path of a file.

Therefore, you can try something like this - this.router.navigate(['/еrror'], {relativeTo: this.activatedRoute});.

Also, one thing to note here is if you will use ['еrror'] instead of this ['/error'], the navigation can be different. If for example, you are currently here - parent/abc/c1 (where c1 is a child component) and you use ['error'] (where 'error' is the child component of the same parent as c1), the URI will become parent/abc/c1/error whereas if you will use ['/error'], you will be first moved one level up parent/abc/ and then the other child will be added - parent/abc/error.

There are a few other approaches as well described here - RouterNavigation along with the one that I described above, have a look at it. Hope this helps.

Why my router navigate function doesn't work in angular 8?

2 Answers2