11522 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai une question très délicate concernant React Router V4 et CSSGroupTransition.

J'aimerai savoir s'il existe un moyen d'imbriquer des transitions de page via CSSGroupTransition en animant uniquement la route imbriquée, et pas l'entièreté de l'application depuis le Router.

Actuellement j'ai ce code-ci pour définir les routes principales :


                <Router>
                    <Route render={({ history, location }) => (
                        <TransitionGroup>
                            <CSSTransition key={ location.key } timeout={500} classNames="default">
                                <Switch location={location}>
                                    <Route exact path="/" render={() => (<div><Link to="/catalog">Catalogue</Link></div>)} />
                                    <Route path="/catalog" render={() => <Page
                                        location={ location }
                                        history={ history }
                                    />} />
                                </Switch>
                            </CSSTransition>
                        </TransitionGroup>
                    )} />
                </Router>


Et dans Catalog.jsx, ce rendu-ci :


            <div className="page">
                <Route path="/catalog/page1" render={() => <Page1
                    location={ this.props.location }
                    history={ this.props.history }
                />} />
                <Route path="/catalog/page2" render={() => <Page2
                    location={ this.props.location }
                    history={ this.props.history }
                />} />
            </div>


Le problème c'est que quand quand j'ajoute un <Link> dans Catalogue.jsx qui ramène vers les composants Page1 ou Page2, l'intégralité de la page est ciblée par la transition, et non pas uniquement le contenu de Catalogue.jsx.

J'ai donc l'impression qu'il n'est pas possible d'animer re-rendre et animer uniquement les routes "enfants" (imbriquées dans les routes principales). Mais pourtant j'ai vu des sites qui le font. Je n'en ai pas sous la main...

Est-ce que quelqu'un aurait une astuce ?

Merci d'avance !