text: If you’re reading this, you’ve probably discovered that React Router v. Paired with React Router, it’s the perfect tool to animate route transitions.
  First, let’s walk through the type of app we’re going to be building to demonstrate animated route transitions.
  If you’re not familiar with URL Parameters, read URL Parameters with React Router v5 before continuing.
  Animations aside, the goal is to make it so the user can navigate between URLs with the following patterns,
  /hsl/:h/:s/:l and
  /rgb/:r/:g/:b.
  If you’re familiar with HSL and RGB codes, those should look familiar. When the user navigates to a path that matches
  /hsl/:h/:s/:l, the background will animate to an HSL color with the corresponding hue (
  :h), saturation (
  :s), and lightness (
  :l). Similar, when the user navigates a path that matches
  /rgb/:r/:g/:b, the background will animate to an RGB color with the corresponding red (
  :r), green (
  :g), and blue (
  :b) values.
  Because you’re here to learn about animated transitions with React Router v5 and not how to set up a basic React app, I’ll give you the starter code upfront. Don’t continue before you have a solid understanding of how it works. It’s the final app without the animated transitions.
  For animating our transitions,'...function Content () {return (<div className='fill content'><TransitionGroup><Switch><Route exact<HSL /></Route><Route exact<RGB /></Route><Route path='*'><div>Not Found</div></Route></Switch></TransitionGroup></div>)}
  Now as we talked about earlier,
  TransitionGroup only gets us part of the way there; we also need to tie in
  CSSTransition Just like we did with
  TransitionGroup, let’s wrap our
  Switch inside of a
  CSSTransition component so we can specify some properties for how
  Switch will be animated.
  We’ll pass it two props,
  timeout and
  classNames (notice it’s plural, with an
  s).'...function Content () {return (<div className='fill content'><TransitionGroup><CSSTransitiontimeout={300}<Switch><Route exact<HSL /></Route><Route exact<RGB /></Route><Route path='*'><div>Not Found</div></Route></Switch></CSSTransition></TransitionGroup></div>)}
  Now, because we’ve given it a
  classNames prop of
  fade, we need to add some CSS that will do the animation for us. and not very React like. Instead, we’ll use React Router v5’s
  useLocation custom Hook. That will return us a
  location object which has a
  key property we can use.
  🙏 now we have access to a unique key value in
  location.key and we path, for 300ms (
  timeout), both the new
  CSSTransition component and the old
  CSSTransition component are in the DOM. You can see this perfectly in the React Dev Tools screenshot below.
  Here’s what’s happening. At that exact moment of the screenshot, if you look deeper into the
  CSSTransition components, the first one looks like this.
  and the second looks like this
  Notice that eventually
  CSSTransition is rendering our
  Switch component, which makes sense. You’ll also notice that the images are the exact same except for the
  key props. This isn’t’ good and it’s the reason why can take in an optional
  location prop. That prop allows you to tell
  Switch “Hey, use this location instead of the location from context”. Exactly what we need. Since we already have access to
  location from earlier when we used
  useLocation, all we have to do is pass it so
  Switch.
  function Content () {const location = useLocation()return (<div className='fill content'><TransitionGroup><CSSTransitiontimeout={300}<div>Not Found</div></Route></Switch></CSSTransition></TransitionGroup></div>)}
  And just like that, it works! (for real this time).
  The goal of this post was to really dive into the
  why of animated transitions in React Router v5 and I think we’ve accomplished just.