Re-initializing class on redirect

by

The id is passed as a prop in the form of this.props.params.id so you should use the componentWillReceiveProps lifecycle method which runs everytime the props change which is what is happening in your case.

The componentWillMount method will not run when you navigate from /parentdir/module/2 to /parentdir/module/3 as the component is already mounted. It will only run when you navigate from some other component (when you go directly for example).

In your Module component add this lifecycle method

componentWillReceiveProps(nextProps){
      if(nextProps.params.id != this.props.params.id){
          //load information etc (whatever you are doing in componentWillMount)
       }
}

What is happening is that when it receives the newer set of props it’s comparing if the param id has changed (all route params live in the params object in props) and when it sees there is a change it carries out the logic. The comparison is not really necessary and you can add the logic as is in the componentWillReceiveProps method but that would be inefficient as it is called everytime the props object changes (might not be the id param at all).

More Related Contents:

  1. Uncaught TypeError: Cannot read property ‘state or props’ of undefined
  2. Can you force a React component to rerender without calling setState?
  3. Use state or refs in React.js form components?
  4. PropTypes in a TypeScript React Application
  5. React Router Pass Param to Component
  6. How to stop /#/ in browser with react-router?
  7. React Hook : Send data from child to parent component
  8. Can’t import SVG into Next.js
  9. Could not proxy request /pusher/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED)
  10. How to reset TabNavigator when user logs out (from other screen)
  11. What will happen if I use setState() function in constructor of a Class in ReactJS or React Native?
  12. Inline CSS styles in React: how to implement a:hover?
  13. Setting text color, outline, and padding on Material-ui Autocomplete component
  14. How to connect API with Web SPA through docker
  15. Azure authentication Audience validation failed
  16. Unable to create new react app with npx create-react-app
  17. Safe alternative to dangerouslySetInnerHTML
  18. How to declare a global variable in React?
  19. How to submit a form using Enter key in react.js?
  20. When exactly is `componentDidMount` fired?
  21. How to generate unique IDs for form labels in React?
  22. how to change jest mock function return value in each test?
  23. What is the expected return of `useEffect` used for?
  24. how to async/await redux-thunk actions?
  25. ReactJS – prevState in the new useState React hook?
  26. You cannot render a inside another . You should never have more than one in your app
  27. react native post form data with object and file in it using axios
  28. React – Is useState ‘s setter function able to change?
  29. Is it possible to return empty in react render function?
  30. How to remove the hash from the url in react-router

Leave a Comment