Estaba tratando de usar el límite de error de reacción en mi aplicación de reacción mecanografiada, pero parece que no funciona. Cada vez que hay un error que interrumpe la aplicación, la interfaz de usuario alternativa no se procesa

ErrorBoundary.tsx

 import React, {Component} from 'react' class ErrorBoundary extends Component<{children:JSX.Element}, { hasError: boolean }> { constructor(props: { children: JSX.Element; } | Readonly<{ children: JSX.Element; }>) { super(props) this.state = { hasError: false }; } static getDerivedStateFromError(error: any) { return { hasError: true }; } render() { if(this.state.hasError == true){ return <h1>Something went wrong</h1> }else{ return this.props.children; } } } export default ErrorBoundary;

Aplicación.tsx

 import { useContext, useState, useEffect, FC} from 'react'; import { AccessContexts } from './components/Contexts'; import Context from './components/Contexts'; import { Route, Routes, BrowserRouter} from 'react-router-dom'; import ErrorBoundary from './components/ErrorBoundary'; import Dashboard from './pages/Dashboard'; function App(){ return ( <AccessContexts> <MyRoutes /> </AccessContexts> ); } export default App; function MyRoutes() { return ( <div className="App"> <ErrorBoundary> <BrowserRouter> <Routes> <Route path='/dashboard' element={<Dashboard />}/> </Routes> </BrowserRouter> </ErrorBoundary> </div> ) }

Estoy usando el componente ErrorBoundary en MyRoutes

Gracias por tu ayuda