I'm writing an application with ReactJS (with react-router-dom and react-bootstrat). My switch changes the content of the vDOM while still maintaining a same <Container> ... </Container>, but depending on the page it changes the classes used.
I'm stuck trying to figure out which approach is correct:

This one uses useState to update the "parent" component from the "child" components:

// 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...

This one, instead, recreates the Container with different classes in each "child" component:

// 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...