React-router Doesn't Remount Component On Different Paths

I have a component in my react app which is a form. The form is used to create new licenses OR edit existing licenses. Either way it is only one component and it checks on componen

Solution 1:

If you do need a component remount when route changes, you can pass a unique key to your component's key attribute (the key is associated with your path/route). So every time the route changes, the key will also change which triggers React component to unmount/remount.

Solution 2:

When the route is same and only path variable changes which in your case is "id", then the component at the top level of your route receives the change in componentWillReceiveProps.

componentWillReceiveProps(nextProps) {
  // In this case cdm is not called and only cwrp know// that id has been changed so we have to updated our page as wellconst newLicenseId = nextProps.match.params.id;

  // Check id changed or notif(currentLicenseId != newLicenseId) {
    updateState(); // update state or reset state to initial state
  }
}

I am pasting code which enables you to detect that page is changed and update the state or re-assign it to initial state. Also, suppose you come on license page first time then save current Id in a variable. That only you will use in componentWillReceiveProps to detect change.

Solution 3:

Use props 'render' instead component.

As per Doc Component props remount while parent state changes but render props update.

https://reacttraining.com/react-router/web/api/Route/route-render-methods