想用react-transition-group实现一个路由切换过度效果，但是无效

Question

参照react-transition-group官网v2的说明和react-routerv4的例子，关键代码如下

 <Route render={({location}) => (
              <div>
                <Route exact path="/" render={() => (<Redirect to="/roomMain"/>)}/>
                <TransitionGroup>
                  {routes.map((route, index) => {
                    if (route.protected === 'yes') {
                      return (
                        <CSSTransition key={index} timeout={{enter: 500, exit: 300}} classNames="fade">
                          <PrivateRoute location={location}
                                        key={index}
                                        path={route.path}
                                        component={route.component}
                                        exact={true}/>
                        </CSSTransition>
                      )
                    } else {
                      return (
                        <CSSTransition key={index} timeout={{enter: 500, exit: 300}} classNames="fade">
                          <Route location={location}
                                 key={index}
                                 path={route.path}
                                 component={route.component}
                                 exact={true}/>
                        </CSSTransition>
                      )
                    }
                  })}
                </TransitionGroup>
              </div>
            )}/>

实际并没有效果，我把react-transition-group切换到v1用CSSTransitionGroup也是没有效果的。

Answer 1

解决了，贴下修改后的代码

---

        <Route render={({location}) => (
          <div>
            <Route exact path="/" render={() => (<Redirect to="/roomMain"/>)}/>
            <TransitionGroup>
              <CSSTransition key={location.key}
                             timeout={{enter: 500, exit: 300}}
                             classNames="fade">
                <Switch location={location}>
                  {routes.map((route, index) => {
                    if (route.protected === 'yes') {
                      return (
                        <PrivateRoute location={location}
                                      key={index}
                                      path={route.path}
                                      component={route.component}
                                      exact/>
                      )
                    } else {
                      return (
                        <Route location={location}
                               key={index}
                               path={route.path}
                               component={route.component}
                               exact/>
                      )
                    }
                  })}
                </Switch>
              </CSSTransition>
            </TransitionGroup>
          </div>
        )}/>