function WarningBanner(props) {
  if (!props.warn) {    return null;  }
  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

shouldComponentUpdate(nextProps, nextState) {
  return <enter_your_condition_to_be_true>; // else false
}

var Statistics = React.createClass({
    fetchStatistics: function() {
        let url = "https://localhost/statistics";

        fetch(url)
        .then(data => {
            if (data) {
                // Disable click for <Toggle> button
                this.props.allowToggle(false);
            } else {
                // Enable click for <Toggle> button
                this.props.allowToggle(true);
            }
        })
        .catch((error) => {
            console.log('error', error);
        });
    },

    render: function(){
        return(
            <div>
                ...
            </div>
        );
    }

});

import { useRouteMatch } from "react-router-dom";

function App() {
  let match = useRouteMatch("/reminder");

  // Do whatever you want with the match...
  return (
<>
  <Switch>
    <Route path="/reminder" component={Reminder} exact />
  </Switch>
  {!match && <Navigation />} <---Conditional rendering
  <MainContent>
    <Router>
      <Route path={"/"} component={Dashboard} exact />
    </Router>
  </MainContent>
</>
  );
    }