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 :
Et dans Catalog.jsx, ce rendu-ci :
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 !
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 !