title: How to integrate Error Boundary in Components routed using react-router
body: <p>I have a page which uses different components which is loaded using react router.
  Is it possible to integrate error boundary in each component as shown in the below code when I use the react router to route to different pages?</p>
  
  <p>My target is to show errors particularly for individual components so that other components should work in case there is an error in one component.</p>
  
  <p>Please see my code below:</p>
  
  <h2>index.js</h2>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  
  registerServiceWorker();
  </code></pre>
  
  <h2>App.js</h2>
  
  <pre><code>import React, { Component } from 'react';
  import {BrowserRouter as Router, Route, Link } from 'react-router-dom';
  //import ErrorBoundary from "./errorboundary";
  import MyComponent1 from './component1';
  import MyComponent2 from './component2';
  
  class App extends Component {
  render() {
  return (
  &lt;Router&gt;
  &lt;div style={{ backgroundColor: 'green' }}&gt;
  &lt;div style={{ backgroundColor: '#f0f0ae', height: '30px' }}&gt;
  &lt;Link to='/'&gt;Link 1&lt;/Link&gt; &amp;#160;&amp;#160;
  &lt;Link to='/comp1'&gt;Link 2&lt;/Link&gt; &amp;#160;&amp;#160;
  &lt;Link to='/comp2'&gt;Link 3&lt;/Link&gt; &amp;#160;&amp;#160;
  &lt;/div&gt;
  
  &lt;div style={{ backgroundColor: '#ffc993', height: '150px' }}&gt;
  &lt;Route path='/' exact render={() =&gt; &lt;MyComponent1 title="Component 1" /&gt;} /&gt;
  &lt;Route path='/comp1' render={() =&gt; &lt;MyComponent1 title="Component 1 Again" /&gt;} /&gt;
  &lt;Route path='/comp2' render={() =&gt; &lt;MyComponent2 title="Component 2" /&gt;} /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/Router&gt;
  );
  }
  }
  
  export default App;
  </code></pre>
  
  <p>This is one of the component in which I want to use Error Boundary.</p>
  
  <h2>component1.js</h2>
  
  <pre><code>import React, { Component } from 'react';
  import ErrorBoundary from "./errorboundary";
  
  class MyComponent1 extends Component {
  state = {
  boom: false,
  };
  
  throwError = () =&gt; this.setState({ boom: true });
  
  render() {
  const { title } = this.props;
  
  if(this.state.boom) {
  throw new Error(`${title} throw an error!`);
  }
  
  return (
  &lt;ErrorBoundary&gt;
  &lt;input type='button' onClick={this.throwError} value={title} /&gt;
  &lt;/ErrorBoundary&gt;
  )
  }
  }
  
  export default MyComponent1;
  </code></pre>
  
  <p>This is another component in which I want to use the Error Boundary.</p>
  
  <h2>component2.js</h2>
  
  <pre><code>import React, { Component } from 'react';
  import ErrorBoundary from "./errorboundary";
  
  class MyComponent2 extends Component {
  state = {
  boom: false,
  };
  
  throwError = () =&gt; this.setState({ boom: true });
  
  render() {
  const { title } = this.props;
  
  if(this.state.boom) {
  throw new Error(`${title} throw an error!`);
  }
  
  return (
  &lt;ErrorBoundary&gt;
  &lt;input type='button' onClick={this.throwError} value={title} /&gt;
  &lt;/ErrorBoundary&gt;
  )
  }
  }
  
  export default MyComponent2;
  </code></pre>
  
  <p>This is my customized error message using error boundary when there is an error in each component.</p>
  
  <h2>errorboundary.js</h2>
  
  <pre><code>import React, { Component } from 'react';
  
  class ErrorBoundary extends Component {
  constructor(props) {
  super(props);
  this.state = { error: null, errorInfo: null };
  
  if(this.props.showError === false)
  {
  this.state.error = null;
  this.state.errorInfo = null;
  }
  }
  
  componentDidCatch = (error, info) =&gt; {
  console.log("error did catch");
  this.setState({error: error, errorInfo: info });        
  }
  
  render() {
  if(this.state.errorInfo) {
  return (
  &lt;div style={{ backgroundColor: '#ffcc99', color: 'white', width: '500px', height: '60px' }}&gt;
  An Error Occurred !
  &lt;/div&gt;
  );
  }
  else {
  return this.props.children;
  }
  }
  }
  
  export default ErrorBoundary;
  </code></pre>
  
  <p>Can anyone please help me? I am a newbie in React JS.</p>