reactjs - Re-initializing class on redirect

Question

I am currently at http://example.com/parentdir/module/2/

This URL actually loads the Module.js class as indicated in the following route:

<Route exact path={"/parentdir/module/:id"} component={Module} />

This is contained within <BrowserRouter> and <Switch> elements as defined in my index.js file.

The Module class has a constructor and componentWillMount methods. These set up the initial details and load information for record #2. Everything works fine so far.

Now, my problem is that in a grandchild component of Module.js I redirect to another page such as page 3 with the following Redirect:

return (
        <Redirect to="/parentdir/module/3/" />
)

The constructor or componentWillMount do not run so record #3 does not properly load. Is this because this component is already loaded in memory from when record #2 was loaded? What is the best way to reload Module.js so it properly loads record #3? Do I somehow have to reinitialize the class? Or do I somehow have to pass the data from the grandchild component back up to the module class? The latter approach would seem to be tedious.

Just to clarify, if I go directly to http://example.com/parentdir/module/3 in the address bar everything works properly, but if I redirect to this same address within the ReactJS environment it does not work properly.

Update

Two answers to my question have been given so far. One solution suggests using componentWillReceiveProps. The other solution suggests passing a method as a prop down to the child and then to the grandchild. Are there pros and cons to using each of these approaches or is it just a matter of preference?

Answer 1

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).