1

I have a simple gallery app that has 2 top-level routes. One of the them ('/album') has a nested route called '/image' that accepts imageId as a parameter ('/album' accepts :albumId). I would like not to apply transition when switching images in the single-image view. Specifically I don't want its parent ('/album') to animate only the nested '/image' if possible (because the way it behaves is the whole page fades in and fades out, even the component that lists thumbnails and it looks unfinished). So far I couldn't find any solution for animating children and skipping parents, only the other way around (and even it is kindy hackish). I tried moving out '/album/image/:imageId' at the top level, but this way going in and out of '/image' from/to the other routes has no transitions, leaving the app with inconsisten feel/behaviour. This is how the flattened Routing looks

<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>

And this is how the nested one used to look:

    <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>
Tihomir Mitkov
  • 846
  • 1
  • 11
  • 20

0 Answers0