How can I implement error boundaries in React Router?

How can I implement error boundaries in React Router?

You can implement error boundaries in React Router by creating a custom error boundary component and using it to wrap your routes.

Can you show me a code example of that?

Sure! Here's a simple example:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('Error caught in ErrorBoundary:', error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

function App() {
  return (
    <Router>
      <ErrorBoundary>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="*" component={NotFound} />
        </Switch>
      </ErrorBoundary>
    </Router>
  );
}

What happens if an error occurs in one of the routes?

If an error occurs in one of the routes, the ErrorBoundary will catch it and display the fallback UI, which in this case is 'Something went wrong.'