React how to call componentDidMount every time when switching between ListItem

As usually when , I am initialise my widget component which loads various charts it works as it should, but when switching to another ListItem , componentDidMount do not load when switch to another item. I need to load it, because it fetch required data for it. But the thing is when I am switching between ListItem did not initialize componentDidMount

MyDashboardContent.jsx

        class MyDashboardContent extends Component {
            constructor(props) {
                super(props);
                this.props.dashboardList();
                this.props.fetchSiteList();
                this._onSwitchTab = this._onSwitchTab.bind(this);
            }
            _onSwitchTab = (value) => {
                this.props.setCurrentDashboard({ value });
            }
            componentDidMount() {}
            render() {
                const { classes } = this.props;
                const { path } = this.props.match;

                return (
                    <div className={classNames(classes.contentWrapper)}>
                        <div className={classNames(classes.contentInnerWrapper)}>
                            <Route path="/report/:report" component={BaseDashboard} />
                        </div>
                        <div className={classNames(classes.leftSideLayerControlPanelWrapper)}>
                            <DashboardSidebar
                                onChange={(event, value) => this._onSwitchTab(value)}
                                reports={this.props.reports}
                                tabLocation={this.props.tabLocation} />
                        </div>
                    </div>
                )
            }
        }
    function mapDispatchToProps(dispatch) {
        return bindActionCreators({
            dashboardList: dashboardActions.fetchAllDashboards,
            setCurrentDashboard: dashboardActions.setCurrentDashboard,
        }, dispatch);
    }

function mapStateToProps({ app }) {
    return {
        reports: app.dashboard.dashboardList,
        tabLocation: app.dashboard.selectedDashboard
    }
}

Here is another component, and ListItem

DashboardSidebar.jsx

class DashboardSidebar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabLocation: this.props.tabLocation
    };
    this.onChange = this.onChange.bind(this);
  }
  onChange(event) {
    this.setState({
      tabLocation: event.target.value
    });
  }
  render() {
    const { classes } = this.props;
    const { path } = this.props.match;
    const { reports = [], sites = [] } = this.props;

    let fromFilterString = "-"
    let toFilterString = "-"

    return (
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}>
        <div>
          <List>
            {reports.map((report) => (
              <ListItem 
              onClick={this.onChange} button key={report.id}>
                <ListItemIcon>
                  <DashboardIcon />
                </ListItemIcon>
                <ListItemText
                  disableTypography
                  primary={
                    <Typography type="body2">
                      <Link to={`${path}/${report.slug}`} style={{ color: "#000" }}>
                        {report.name}
                      </Link>
                    </Typography>
                  }
                />
              </ListItem>
            ))}
          </List>
        </div>
        <Divider light />
      </Drawer>
    )
  }
}

Here is part of component, which initialize Route from MyDashboardContent.jsx In this component there is initialisation of ChartWidget which seems run correct, but when clicking on other ListItem run componentDidUpdate which do not fetch required data for charts. Also I find out that when I changed in BaseDashboard component key={i} to key={l.id} is started to hit componentDidMount, but then widget's do not load, but from Console I can see that it hit componentDidMount and fetch data which I console.log() .

BaseDashboard.jsx

class BaseDashboard extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.match.params.report === prevProps.match.params.report) {
      return true;
    }
    let widgets = {};
    let data = {};
    let layout = {};
    fetch(...)
      .then(response => response.json())
      .then(data => {
        ...
        this.setState({dashboard: data, isLoading: false, layouts: layout });
      })
  }

  componentDidMount() {
    this.setState({ mounted: true, isLoading: true });
    let widgets = {};
    let data = {};
    let layout = {};

    fetch(...
    })
      .then(response => response.json())
      .then(data => {
          ...
        this.setState({dashboard: data, isLoading: false, layouts: layout });
      })
  }

  sortWidgets(widgets) {
    ...
    return widgets;
  }

  generateDOM() {
    return _.map(this.state.dashboard.widgets, function(l, i) {
        ....
      return (
        <div key={i}>
            <ChartWidget
              visualization={l.visualization}
              name={l.visualization.name}
        </div>
      );
    }.bind(this));
  }
  render() {

    return (
      ...
    );
  }
}

ChardWidged.jsx

class ChartWidget extends Component {
..
  componentWillUnmount() {
    clearInterval(this.state.checkJobStatusIntervalID);
  }

  _checkJobStatus() {
    this.props.fetchLatestJobStatus(this.props.queryId, this.props.dataset.jobId);
  }

  componentDidMount() {
    this.props.addDataset(this.props.queryId, this.props.visualization.query.latest_query_data_id);
    if(this.props.dataset && this.props.dataset.resultId > 0) 
    {
    this.props.fetchQueryResult(this.props.queryId, this.props.dataset.resultId)
    } else 
    {
      this.props.startRefreshJob(this.props.queryId, this.props.queryParams)
    }
  }

   componentDidUpdate(prevProps, prevState) {
    }

  _setJobStatusCheckInterval(isLoading) {
...
  }

  render() {
    ...
    return (
      <Card className={classes.chartWidgetPaper}>
        <CardContent className={classes.chartWidgetPaper}>
          {headline}
          {divider}
          {content}
        </CardContent>
      </Card>
    );
  }
}