React groupe de transition - Ne pas animer les enfants

Question

J'utilise react-transition-group pour animer un commutateur routeur dans React:

<CSSTransitionGroup transitionName="zoom" transitionEnterTimeout={200} transitionLeaveTimeout={200}> 
     <Switch key={key} location={this.props.location}> 
      <Route path={this.props.match.url+"/tasks/:task_id"} component={SingleTask} key={'none'} /> 
      <Route slug={this.props.match.params.project_slug} path={this.props.match.url+"/"} render={(params) => (
       <ProjectIndex {...params} slug={this.props.match.params.project_slug} /> 
      )} key={'none'} /> 
     </Switch> 
    </CSSTransitionGroup> 

Il déclenchait également l'animation chaque fois des sous-voies changent. Alors, pour se déplacer que je reçois le chemin en utilisant this.props.location.pathname, puis en utilisant un code vraiment brut pour obtenir le dernier segment:

pathname = pathname.split('?')[0].split('/').filter(function (i) { return i !== ""}).slice(-1)[0]; 

... et si elle est « tâches », « activité » ou « notes , je suis juste la mise en clé de 'noanimate' (ie une chaîne générique de sorte que le commutateur ne remarque pas):

switch(pathname){ 
     case 'tasks': 
     case 'activity': 
     case 'notes': 
      key = 'noanimate'; 
      break; 
     default: 
      key = pathname; 
      break; 
    } 

maintenant, la redirection /project-/project/tasks fait une double transition comme il va 'project'-'noanimate' , et je ne suis pas sûr si je suis destiné à écrire encore pire manipulati chaîne juste pour avoir le dernier ou le dernier avant-dernier terme, selon qu'il s'agit de 'tâches'/'activités'/'notes' ou de toute autre chaîne.

Y a-t-il une meilleure solution, ou est-ce que ... comment nous sommes censés faire les choses?

Answer 1

j'ai eu le même problème, donc je l'ai écrit ma propre solution: switch-css-transition-group

installer après que vous pouvez réécrire votre code:

import SwitchCSSTransitionGroup from 'switch-css-transition-group' 

<SwitchCSSTransitionGroup location={this.props.location} transitionName="zoom" transitionEnterTimeout={200} transitionLeaveTimeout={200}> 
    <Route path={this.props.match.url+"/tasks/:task_id"} component={SingleTask} key={'none'} /> 
    <Route slug={this.props.match.params.project_slug} path={this.props.match.url+"/"} render={(params) => (
     <ProjectIndex {...params} slug={this.props.match.params.project_slug} /> 
    )} key={'none'} /> 
</SwitchCSSTransitionGroup> 

Il va essentiellement jeter toutes les routes à l'intérieur de cette « Switch » et l'utilisation de matchPath La fonction reconnaît si une route correspond correctement.