使用CSSTransitionGroup遇到问题

Question

我用CSSTransitionGroup做了反应堆的模拟，但是没有效果，没有错误，关键是设置好了，css导入成功，但是没有效果。

render() { 
    var kk = new Date().getTime(); 
    return (
     <BrowserRouter> 
     <div> 
      <div className="leftNav" style={styles.leftNav}> 
      {leftNav()} 
      </div> 
      <div className="content" style={styles.content}> 
      <CSSTransitionGroup 
       transitionName="a" 
       transitionAppear={true} 
       transitionAppearTimeout={500} 
       transitionEnterTimeout={500} 
       transitionLeaveTimeout={300}> 
       <div key={location.pathname}> 
       <Route exact path="/" component={Com1}/> 
       <Route exact path="/com1" component={Com1}/> 
       <Route exact path="/com2" component={Com2}/> 
       <Route exact path="/todo" component={TodoList}/> 
       <Route exact path="/com3" component={Com3}/> 
       </div> 
      </CSSTransitionGroup> 
      </div> 
     </div> 
     </BrowserRouter> 
    ); 
    } 

请给我一些提示。

Answer 1

从Animated Add-Ons文档。

注意： 必须为所有儿童 ReactCSSTransitionGroup的提供关键属性，甚至只呈现单个项目时。这就是React如何确定哪些孩子进入，离开或留下的。

在你的例子中，你有一个孩子< CSSTransitionGroup />组件。它永远不会改变，离开或进入DOM ...但它是儿童做的。

删除<div />并用您的< CSSTransitionGroup />包裹您的路由处理程序。确保为每个<Route />提供一个唯一的密钥！

这是一个工作示例项目react-router-transition。

这里是找到解决方案的github issue。

这里是参考答案的糊状，信用@resting

<Router> 
    ... 
    <nav> 
    <NavLink to="/" exact activeClassName="active"> <span>Production</span> </NavLink> 
    <NavLink to="/personal" activeClassName="active"> <span>Personal</span> </NavLink> 
    </nav> 
    ... 
    <Route render={({ location }) => (
    <CSSTransitionGroup 
     transitionName="slide-left" 
     transitionEnterTimeout={300} 
     transitionLeaveTimeout={500} 
    > 
     <Switch key={location.key} location={location}> 
     <Route exact path="/" component={Production}/> 
     <Route path="/personal" component={Personal}/> 
     </Switch> 
    </CSSTransitionGroup> 
)} 
    /> 
</Router>