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>