Angular - navigate back from detail component

Question

I have a page '/categories' showing multiple categories which the user can click on. When a category is clicked, the detail page is shown with the id of the category shown in the url '/categories/1'.

To achieve this I configured my app routing module the following way:

{
    path: `${locale}/categories`,
    component: CategoriesComponent
  },
  {
    path: `${locale}/categories/:id`,
    component: CategoryDetailComponent
  }

I navigate to the detail page with the following code:

this.router.navigate([getLocaleFromStorage(), category.id]);

The problem is that when I'm on the detail page and I go back in the browser I am being sent to the page '/categories/categories' instead of just '/categories'.

My first thought was to overwrite the back navigation, but I haven't found a good way to do this yet. I have found an article that explains how to implement this kind of structure, but they add a back button to the page and navigate back to the correct page on click of the button. This would work, but the user would still be sent to the '/categories/categories' page if just using the browser's back button.

Is there any good way to achieve what I want?

The article I was speaking about

Thanks in advance!

I didn't implement back navigation because I don't know if it's a good practice nor how to do it. I noticed the problem while using the browser's back button. — DennisN

DennisN DennisN · Accepted Answer · 2018-01-02T10:23:07

I have found the problem.

Instead of

this.router.navigate([getLocaleFromStorage(), category.id]);

I should have used

this.router.navigate([getLocaleFromStorage()+'/categories', category.id]);

Because I was providing an url that didn't exist, the route was redirected to the categories page by the App routing module.

Angular - navigate back from detail component

1 Answers