title: Redirect to error page ReactJS and react-router
body: <p>I'm trying to send the user to a generic error page when the App breaks, thing is I'm trying with the <a href="https://reactjs.org/docs/error-boundaries.html" rel="noreferrer">ErrorBoundary</a> method and then rendering out the Redirect;</p>
  
  <pre><code>export default class ErrorBoundary extends Component {
      state = { has_error: false }
  
      componentDidCatch(error, info)
          this.setState({ has_error: true });
      }
  
  
      render() {
          if (this.state.has_error)
              return &lt;Redirect to="/somewhere/else" /&gt;
          }
          return this.props.children;
      }
  };
  </code></pre>
  
  <p>And then using the ErrorBoundary to wrap all the routes and sub components inside the Router</p>
  
  <pre><code>&lt;Router history={history}&gt;
      &lt;ErrorBoundary&gt;
          &lt;Header /&gt;
          &lt;Switch&gt;
              &lt;Route exact path="/" component={Home} /&gt;
              &lt;Route
                  path="/createManager/:managerId"
                  component={CreateManager}
              /&gt;
              &lt;Route path="/login" component={LoginComp} /&gt;
              &lt;Route path="/test" component={Test} /&gt;
              &lt;Route path="/register" component={RegisterAccount} /&gt;
              &lt;Route component={NotFound} /&gt;
          &lt;/Switch&gt;
          &lt;Footer /&gt;
      &lt;/ErrorBoundary&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>The componentDidCatch is never triggered, thus, never leaving the current error page, neither in the dev nor prod version. How can I send the user to a X route when the App breaks or tries to throw an error? </p>
  
  <p>In order to trigger an error, I leave one Component with an empty prop, and later on click trying to use the function that should be passed in the prop.</p>