Как каждый раз выполнять action корневого компонента в react-router-4?

Question

[Matvey]

Существуют например такие урлы:

/
/foo
/foo/3

На корневом урле отрисовывается компонент <App />, в componentDidMount которого выполняется некий action. Когда я хожу по урлам дальше (/foo, /foo/3), то грузятся и другие компоненты, но экшн компонента App больше не срабатывает, что логично.

А как сделать так, чтобы все-таки каждый раз срабатывал? Кинуть разве что экшн в componentWillUpdate - но это безумие, он будет слишком часто вызываться..

Answer 1

[Антон Спирин]

Сделайте так:

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { someAcion } from '../somePlace';

class App extends Component {
  ...
  componentWillReciveProps(nextProps) {
    if (this.props.location !== nextProps.location) {
       this.props.someAciton();
    }
  }
  ...
}

const mapDispatchToProps = {
  someAction,
};

export default withRouter(connect(null, mapDispatchToProps)(App));