Angular 6 same router.navigate causes refresh when called from another component

Question

I have a routing module as follows:

App-routing module

const routes: Routes = [
  {
    path: '',
    redirectTo: environment.devRedirect,
    pathMatch: 'full',
    canActivate: [AuthenticationGuard]
  },
  {
    path: 'customers/:customerId/contracts/:contractId',
    loadChildren: './grouping/grouping-routing.module#GroupingRoutingModule'
    canActivate: [AuthenticationGuard],
  }
];

And a child component with routes:

const routes: Routes = [
      {
        path: 'create',
        component: CreateEditComponent,
        data: { animation: 'create' },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: ':groupId/edit',
        component: CreateEditComponent,
        data: { animation: 'edit' },
        canActivate: [ AuthenticationGuard ]
      },
      {
        path: '',
        component: OverviewComponent,
        data: { animation: 'overview' },
        canActivate: [ AuthenticationGuard ]
      }
];

I have a top level navbar component which sits in the app.component.html.

Both the navbar component and the CreateEditComponent have a function that looks like below. Both are called using a button with (click):

  goToOverview(): void {
    this._router.navigate(['customers/:customerId/contracts/:contractId']);
  }

When I debug the router object both look exactly the same i.e. have all the same paths etc.

My problem is that the navbar function routes correctly but the CreateEditComponent navigates, appends a ? then reloads the page. What am I missing here and why do two seemingly similar calls have such different results when the activatedRoute objects are identical?

Steve Fitzsimons · Accepted Answer · 2018-06-18 08:52:29Z

6

Finally figured out what was causing the refresh. The button with the (click) handler that was causing the refresh was sitting inside a <form> tag. Whenever the click function was called which did the router.navigate it caused a form submission which seems to be the cause

answered Jun 18, 2018 at 8:52

Steve Fitzsimons

3,9048 gold badges32 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Fitzsimons Over a year ago

moved he button out of the form. Could also be resolved by either removing ngSubmit from the form or adding it and removing the click handler from the button. Both methods the button is inside the form tags

bryan60 · Accepted Answer · 2018-06-15 17:49:38Z

you're using a relative URL, which means you're navigating relative to the current components position in the router tree.

Navbar is in the root component, so it is navigating relative to the router root which is "/".

CreateEditComponent is a routed child of root, so it is navigating relative to the the routers first child, which may be "/create" or whatever, I'm not sure how exactly you have your router structured from the question. But basically, everytime you nest a router outlet / add child routes, you create a new node in the router tree.

The important part though is, doing it like this:

 this._router.navigate(['/customers/:customerId/contracts/:contractId']);

with a "/" in front will make it an absolute URL that will go to the same place no matter where it's called from as it will always navigate from the root.

You're probably seeing the odd refresh behavior because you're trying to navigate to an invalid route and causing an error that's being handled poorly.

My personal opinion, FWIW, nested router outlets are cool and all, and they provide a substantial amount of power, but they also create a lot of complexity in your application. Use them as appropriate, but be judicious in their use and tend towards a flatter structure when possible.

Collectives™ on Stack Overflow

Angular 6 same router.navigate causes refresh when called from another component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related