En el proceso de actualizar mi aplicación de reacción a react-router-dom v6, tuve que refactorizar cómo se maneja el enrutamiento anidado. En las versiones anteriores de react-router-dom, logré declarar rutas anidadas en componentes secundarios y eso evitó volver a renderizar el componente principal cada vez que la ruta cambiaba en la aplicación.

La configuración se podría resumir en algo como esto:

 const Component = React.lazy(() => import('./path/to/Component')); <Switch> <Route path="..." component={Component} /> </Switch>

Luego, dentro del Componente:

 const NestedComponent = React.lazy(() => import('./path/to/NestedComponent')); const Component = ({match}) => { ... <Route path={match.url} component={NestedComponent} /> ... }

Siguiendo la guía de actualización para react-router-dom v6, refactoricé los componentes anteriores en algo como lo siguiente:

 const Component = React.lazy(() => import('./path/to/Component')); <Routes> <Route path=".../*" element={ <React.Suspense fallback={"loading 1..."}> <Component /> </React.Suspense> } /> </Routes>

Luego en el componente:

 const NestedComponent = React.lazy(() => import('./path/to/NestedComponent')); const Component = ({match}) => { ... <Routes> <Route path={match.url} element={ <React.Suspense fallback={"loading 2..."}> <NestedComponent /> </React.Suspense> } /> </Routes> ... }

Lo que esperaba hubiera sido que el Component Component no se volviera a renderizar al cambiar la ruta, solo el Componente anidado (por lo tanto, mostrar solo loading 2... dentro del Component ). Pero en cambio, cuando cambio la ruta, todos los componentes se vuelven a renderizar. Además, no estoy seguro de si con la nueva sintaxis (usar element en lugar de component en el componente Route ) tiene sentido combinarlo con React.lazy .

¿Hay alguna forma de evitar que se vuelva a renderizar el componente principal?

Con la nueva sintaxis, ¿tiene sentido usar React.lazy? ¿O hay otra forma de cargar componentes de forma perezosa?