title: How can I use react-router after catching an error with an error boundary?
body: <p>I have a simple react application (created with create-react-app) that uses react-router to navigate between components that are the "body" of my app. I recently started looking into error handling and came across error boundaries. When a user experiences an error, I would like to still show the shell of the application (for navigational use) with the body replaced by an error message. Currently I have the following code:</p>
  
  <p>index.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>...
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;Router&gt;
              &lt;App /&gt;
          &lt;/Router&gt;
      &lt;/Provider&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p>App.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>...
  function App() {
      return (
          &lt;div className="container"&gt;
              &lt;Header /&gt;
              &lt;ErrorBoundary&gt;
                  &lt;Switch&gt;
                      &lt;Route exact path="/" component={UnderConstruction} /&gt;
                      &lt;Route path="/pas" component={PAS} /&gt;
                      &lt;Route path="/github/:user" component={GithubPage} /&gt;
                      &lt;Route path="/reddit" component={RedditPage} /&gt;
                  &lt;/Switch&gt;
              &lt;/ErrorBoundary&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Header.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>const links = [
      { link: '/', linkText: 'Home' },
      { link: '/pas', linkText: 'PAS' },
      { link: '/github', linkText: 'Github' },
      { link: '/reddit', linkText: 'Reddit' }
  ];
  
  const Header = () =&gt; {
      const activeStyle = { color: '#f15b2a' };
      return (
          &lt;nav className="row text-center mb-3"&gt;
              &lt;div className="col-12"&gt;
                  {links.map(({ link, linkText }) =&gt; (
                      &lt;NavLink
                          to={link}
                          key={link}
                          exact
                          activeStyle={activeStyle}
                          className="btn btn-dark"&gt;
                          {linkText}
                      &lt;/NavLink&gt;
                  ))}
              &lt;/div&gt;
          &lt;/nav&gt;
      );
  };
  </code></pre>
  
  <p>ErrorBoundary.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>...
  class ErrorBoundary extends React.Component {
      constructor(props) {
          super(props);
          this.state = { error: null, eventID: null };
      }
  
      componentDidCatch(error, errorInfo) {
          this.setState({ error });
          Sentry.withScope(scope =&gt; {
              scope.setExtras(errorInfo);
              const eventID = Sentry.captureException(error);
              this.setState({ eventId: eventID });
          });
      }
  
      handleReportClick = e =&gt; {
          e.preventDefault();
          Sentry.showReportDialog({ eventId: this.state.eventId });
      };
  
      render() {
          if (this.state.error) {
              //Render fallback UI
              return &lt;ErrorPage onReportClick={this.handleReportClick} /&gt;;
          } else {
              //When there's not an error, render the children untouched
              return this.props.children;
          }
      }
  }
  </code></pre>
  
  <p>ErrorPage.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>...
  const ErrorPage = ({ onReportClick, ...props }) =&gt; {
      return (
          &lt;&gt;
              &lt;div className="row mb-3"&gt;
                  &lt;div className="col-12 text-center"&gt;
                      &lt;h1 className="display-4"&gt;
                          An error has been encountered.
                      &lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div className="row"&gt;
                  &lt;div className="col-6 text-center"&gt;
                      &lt;button
                          className="btn btn-lg btn-outline-info"
                          onClick={onReportClick}&gt;
                          Report feedback
                      &lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div className="col-6 text-center"&gt;
                      &lt;a
                          href={process.env.REACT_APP_ENVIRONMENT_URL}
                          className="btn btn-lg btn-outline-info"&gt;
                          Go back to the worklist
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/&gt;
      );
  };
  </code></pre>
  
  <p>Since <code>&lt;Header /&gt;</code> is outside the error boundary in App.js, I'm expecting it to show up and provide the ability to navigate away from the error page. The header shows up on the error page and clicking through the nav links changes the URL; however, the application doesn't actually go to any of the other pages, it just sits on the error page.</p>