Angular router navigation url renders with %2F symbol

When using the [routerLink] directive in Angular, the issue with the URL rendering %2F instead of / can be resolved by ensuring that the path segments are correctly defined in the router configuration. In your case, the issue might be related to the way the child routes are defined.

To fix this issue, make sure that the child routes are defined without duplicating the parent route path. In your router configuration, the child route path should be relative to the parent route. Here's an example of how you can adjust the child route path:

{
  path: 'title',
  component: EditBookComponent,
  data: { text: 'Edit book' }
}

By defining the child route path as 'title' instead of 'books/title', the navigation URL should render correctly as localhost/books/title without the %2F symbol. Ensure that the routerLink in your HTML template reflects this change:

[routerLink]="['/', 'books', 'title']"

It seems like there is a small mistake in your router configuration. The issue is with the paths you’ve defined for your child routes. They should be relative to the parent route, not absolute.

Here’s how you can correct it:

{
  path: 'books',
  component: BooksComponent,
  children: [
    {
      path: '',  // This matches the parent route '/books'
      component: BooksComponent,
      data: { text: 'New book' }
    },
    {
      path: 'title',  // This matches the child route '/books/title'
      component: EditBookComponent,
      data: { text: 'Edit book' }
    }
  ]      
}

And in your HTML, you can keep the routerLink as it is:

[routerLink]="['/', path]"

Thanks

Hello maniknandan,

%2F is URL-encode for / in web broser url. it's not an issue. you need to check other points if you are facing issue