I have many component in react page. in my router file I have used them like below.

  <SecureRoute path="/new-inventory">
            <Inventory />
        </SecureRoute>

        <SecureRoute path="/list-inventory">
            <ListInventory />
        </SecureRoute>


        <SecureRoute exact path="/:id/edit" component={EditInventory} />

below path gets called within the component

   <SecureRoute exact path="/:id/edit" component={EditInventory} />

I am using below anchor tag.

<a href={/${props.inventory.id}/edit}>

path in browser gets generated like this

http://localhost:4200/36917491-4ef5-4fa2-87aa-c921986f94d1/edit

now if I click on otther tab for ex inventory then instead of coming url like http://localhost:4200/inventory it comes like http://localhost:4200/36917491-4ef5-4fa2-87aa-c921986f94d1/edit/inventory

means path gets appended instead of replacing. what should I do?