using same component for different route path in react-router v4

Question

I am trying to have separate routes but same component for add/edit forms in my react app like the below:

Answer 1

One solution is use inline function with component, that will render a new component each time, But this is not a good idea.

Like this:

 }>
 }> 

Better solution would be, use componentWillReceiveProps lifecycle method in ManageClient component. Idea is whenever we render same component for two routes and switching between them, then react will not unmount-mount component, it will basically update the component only. So if you are making any api call or require some data do all in this method on route change.

To check, use this code and see it will get called on route change.

componentWillReceiveProps(nextProps){
   console.log('route chnaged')
}

Note: Put the condition and make the api call only when route changes.