Estoy usando react-router-v6 y tengo problemas con mi configuración. Estoy usando enrutamiento anidado con diseños con la siguiente configuración.
Aplicación.js
<BrowserRouter> <Routes> <Route exact path='/' element={<SiteLayout />} /> </Routes> <Routes> <Route path='/app/' element={<AppLayout />} > <Route path='dashboard' element={<Dashboard />} /> <Route path='send' element={<Send />} /> </Route> </Routes> </BrowserRouter> AppLayout es un elemento de clase y tiene algunas variables de estado y obtención de datos que pasan al componente Dashboard a través de <Outlet /> usando el contexto en este momento. Esto funciona bien, pero el componente Dashboard debería poder hacer su propia llamada de descanso usando los datos pasados desde AppLayout cuando llegan nuevos datos. Esto estaba planeando hacer con componentDidUpdate en el componente Dashboard, pero lo que entendí es que no funciona con el contexto. Entonces, cada vez que paso contexto a Dashboard, no obtiene datos y no se actualiza. ¿Cómo podría continuar desde aquí? Estoy tirando de mi cabello aquí atm :D tratando de averiguar cómo trabajar con esto. ¿Hay alguna otra forma de ejecutar automáticamente una función cuando el componente de clase obtiene datos nuevos?
solo haz esto en su lugar.
<BrowserRouter> <Routes> <Route exact path='/' element={<SiteLayout />} /> <Route path='/app/' element={<AppLayout />} /> <Route path='/app/dashboard' element={<Dashboard />} /> <Route path='/app/dashboard/send' element={<Send />} /> </Routes> </BrowserRouter>