Status update when changing route using React Redux

Question

I am using React + Redux and want to know how to properly update the state.

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>

      <Route path="/questions" component={App}>
        <Route path="subject">
          <Route path="english" component={displayQuestions} />
          <Route path="math"    component={displayQuestions} />
          <Route path="science" component={displayQuestions} />
          <Route path="history" component={displayQuestions} />
        </Route>
      </Route>

      ...

    </Router>
  </Provider>
  , document.querySelector('.app'));

You can click on the tabs on these routes (one example is shown here):

<div>
    <Link to={'/questions/english'}>English</Link>
</div>

...

In my render method for displayQuestions, I check

if (!questions) {
    Loading content
}

return (
    {this.renderQuestions()}
)

So, when the user navigates to the page, in my componentDidMount () component, I use the action this.props.fetchQuestions method, and then it makes an async request for my backend, goes through the reducers, and then into the rendering method above. In the renderQuestions function, and in renderQuestions, I just grab the questions from this.props.questions.

, , componentDidMount . , english, DidMount, , url , componentDidMount .

, , userProfile, , . , , / , DidMount .

, URL? React + Redux? - .

EDIT:

:

      componentDidUpdate(nextProps) {

        if (this.props.route.path !== nextProps.route.path) {
          let subject = this.props.location.pathname.split('/')[3];
          this.props.fetchQuestions(subject);
        }

        return false;
      }

, . .

Answer 1

, , "Tabs" - , . , , , - , , ? componentWillReceiveProps, . .

componentWillReceiveProps(nextProps) {
  if (nextProps.tab === 'questionTab' && this.props.tab !== 'questionTab' ) {
    this.props.fetchQuestions();
  }
}

Answer 2

LocationDescriptor . , , componentWillReceiveProps. componentWillReceiveProps , , , - componentWillMount. :

<div>
    <Link to={ 
               pathname: '/questions/subject', 
               state: { subject: 'english'} 
    }>English</Link>

    <Link to={ 
               pathname: '/questions/subject', 
               state: { subject: 'science'} 
    }>English</Link>
</div>

/** now you can declare only one route, and the state invokes the change **/
<Route path="/questions" component={App}>
    <Route path="subject" component={displayQuestions} />
</Route>

class displayQuestions extends React.Component {
    _updateQuestions(props, nextProps) {
          const currentSubject = props.location.state.subject; // the current subject
          const nextSubject = nextProps ? nextProps.location.state.subject : null; // the nextSubject (componentWillReceiveProps) or null (componentWillMount)
          if(currentSubject  === nextProps) { // if the subjects are equal do nothing
              return;
          }

          props.fetchQuestions(nextSubject || currentSubject); // fetch the questions of nextSubject (componentWillReceiveProps) or currentSubject (componentWillMount)
    }

    componentWillMount() {
          _updateQuestions(this.props);
    }

    componentWillReceiveProps(nextProps) {
          _updateQuestions(this.props, nextProps);
    }
}