Angular router navigation url renders with %2F symbol

Question

My angular navigation router url renders with  localhost/books%2Ftitle  instead of '/'

Here is my routerLink. Parent routes working well. Child route not working.

Html:

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

Router config:

  path: 'books',

    component: BooksComponent,

    children: [

      {

        path: 'books',

        component: BooksComponent,

        data: {  text: 'New book' }

      },

      {

        path: 'books/title',

        component: EditBookComponent,

        data: {  text: 'Edit book' }

      }]      

  },