Estoy escribiendo una aplicación con ReactJS (con react-router-dom y react-bootstrat ). Mi switch cambia el contenido del vDOM mientras mantiene el mismo <Container> ... </Container> , pero dependiendo de la página, cambia las clases utilizadas.
Estoy atascado tratando de averiguar qué enfoque es el correcto:

Este usa useState para actualizar el componente "principal" de los componentes "secundarios":

 // Pages.js export default function Pages() { const [classes, setClasses] = useState("flex-grow-1") const replaceClasses = classes_ => setClasses(`flex-grow-1 ${classes_}`) return ( <Container className={classes}> <Suspense fallback={<Loading replaceClasses={replaceClasses} />}> <Switch> <Route exact path="/"> <Home replaceClasses={replaceClasses} /> </Route> <Route path="/404"> <NotFound replaceClasses={replaceClasses} /> </Route> <Redirect to="/404" /> </Switch> </Suspense> </Container> ) } // Home.js export default Home({ replaceClasses }) { // Replace root container classes replaceClasses('d-flex align-items-center justify-content-center') return <span>Home Page</span> } // And so on...

Este, en cambio, recrea el Container con diferentes clases en cada componente "hijo":

 // Pages.js export default function Pages() { return ( <Suspense fallback={<Loading />}> <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/404"> <NotFound /> </Route> <Redirect to="/404" /> </Switch> </Suspense> ) } // Home.js export default Home() { return ( <Container className="flex-grow-1 align-items-center justify-content-center"> <span>Home Page</span> </Container> ) } // And so on...