La aplicación My React usa react-router-dom para la navegación. Dentro de cada uno de los diferentes componentes para estas rutas, existe la necesidad potencial de mostrar algún tipo de componente Modal de error cuando algo sale mal. En lugar de necesitar importar el mismo Error Modal en cada componente que lo necesite, administrar el estado dentro del padre y declarar funciones de alternancia, me gustaría hacer esto una vez fuera de todos los demás componentes y solo mostrar el Error Modal genérico cuando sea necesario.

Sospecho que es posible que necesite usar la API de contexto, pero no la he usado antes.

Encontré este artículo pero no estoy seguro de cómo implementarlo con mi aplicación que tiene varias rutas.

Idealmente, me gustaría activar el modal desde mi interceptor axios en mi index.js y mostrar el modal en la parte superior de cualquier página en la que se encuentre el usuario.

índice.js:

 //imports... axios.interceptors.response.use(undefined, err => { if (err.response.status === 500) { // Set show state for error modal here } return Promise.reject(err); }); ReactDOM.render(<App />, document.getElementById('root'));

Aplicación.js:

 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; // other imports... const App = () => { return ( <Router> <Routes> <Route path='/page1' element={<Page1 />}></Route> <Route path='/page2' element={<Page2 />}></Route> </Routes> </Router> ); };