Tom
Tom

Reputation: 2611

Angular 6 redirecting back to home after navigation

I'm having an issue in my Angular 6 app where I perform a successful navigation to another view, but then it's automatically redirecting me back to the index view. I successfully see the contents of the component on screen, ngOnInit fires, and I can also get the route params out of the ActivatedRoute.

If I enter the URL manually in the address bar, it doesn't navigate back to home.

Can anyone see where I'm going wrong? Cheers in advance.

Update 1

If I use an a rather than a button, it doesn't redirect.

<!-- this will cause the route to redirect back -->
<button 
  class="btn btn-default btn-sm pull-right"
  [routerLink]="['/destination', _destination.placeId]">
  Edit...
</button>

<!-- This works! -->
<a 
  class="btn btn-default btn-sm pull-right" 
  [routerLink]="['/destination', _destination.placeId]">
  Edit (LINK)
</a>

app.module.ts - routes

RouterModule.forRoot([
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'destination/:id', component: EditDestinationComponent }
], { enableTracing: true })

navigation trigger

<button 
  class="btn btn-default btn-sm pull-right"
  [routerLink]="['/destination', _destination.placeId]">
  Edit...
</button>

edit-destination.component.ts

@Component({
  selector: 'app-edit-destination',
  templateUrl: './edit-destination.component.html',
  styleUrls: ['./edit-destination.component.css']
})
export class EditDestinationComponent implements OnInit {

  constructor(
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    console.log('loaded edit-destination');
    this.route.paramMap
      .pipe(
        tap((params: ParamMap) => console.log(`destination: ${params.get('id')}`))
      )
      .subscribe();
  }

}

edit-destination.component.html

<p>
  edit-destination works!
</p>

Router tracing snippet of router tracing in browser console

Upvotes: 4

Views: 2272

Answers (1)

Luis Araujo
Luis Araujo

Reputation: 91

In my case, I was using a form tag in the markup, so I figured it was triggering a "form post" when the user clicked the button. Adding return false; at the last line of code of the click event solved the problem.

Upvotes: 9

Related Questions