react-transition-group - 从转换中排除嵌套路由

Question

我有一个简单的画廊应用程序，它有 2 条顶级路线。其中之一 ('/album') 有一个名为 '/image' 的嵌套路由，它接受 imageId 作为参数（'/album' 接受 :albumId）。在单图像视图中切换图像时，我不想应用过渡。具体来说，如果可能的话，我不希望它的父级（'/album'）只为嵌套的'/image'设置动画（因为它的行为方式是整个页面淡入淡出，即使是列出缩略图的组件，它看起来未完成）。到目前为止，我找不到任何解决方案来为孩子制作动画和跳过父母，只有相反的方式（甚至它有点骇人听闻）。我尝试在顶层移出'/album/image/:imageId'，但这种方式进出'/image'从/到其他路线没有过渡，以不一致的感觉/行为离开应用程序。这就是扁平化路由的外观

<Switch>
  <Route path="/image/:albumId/:imageId">
    <Photo></Photo>
  </Route>
  <Route path="/">
    <TransitionGroup>
        <CSSTransition key={location.key} classNames="fade" timeout={TRANSITION_LENGTH}>
            <Switch location={location}>
              <Route path="/album-list">
                <AlbumList></AlbumList>
              </Route>
              <Route path="/album/:albumId">
                <Album></Album>
              </Route>
              <Route path="/">
                <Redirect to="/album-list"></Redirect>
              </Route>
            </Switch>
        </CSSTransition>
    </TransitionGroup>
  </Route>
</Switch>

这就是嵌套的过去的样子：

    <Link to="/">Back to Albums</Link>
    <h1>Photos in <Link to={`${url}`}>{album.name}</Link></h1>
    <Switch>
        <Route path={`${path}/image/:imageId`}>
            <Photo></Photo>
        <div className="List">
            {album.photos.map((photo, index) => {
                return <div className="Photo" key={index}>
                        <Link to={`${url}/image/${photo.id}`}>
                            <img src={photo.thumbnailUrl}/>
                            </Link>
                       </div>
            })} 
            </div>  
        </Route>
        <Route>
            <div className="Grid">
            {album.photos.map((photo, index) => {
                return <div className="Photo" key={index}>
                <Link to={`${url}/image/${photo.id}`}>
                    <img src={photo.thumbnailUrl}/>
                </Link>
                </div>
            })} 
            </div>
        </Route>
    </Switch>

标签： react-transition-group