Route Transitions with Framer Motion

Example.tsx

const FakeComponent = () => {
  return (
      <AnimatedRoutes exitBeforeEnter initial={false}>
        <RouteTransition exact path="/some-route">
          <NewUsers />
        </RouteTransition>
        <RouteTransition exact path="/yo" >
          <Users />
        </RouteTransition>
      </AnimatedRoutes>
  )
}

MountTransition.tsx

import { FC } from 'react'
import { motion } from 'framer-motion'

type Props = {
  slide?: number
  slideUp?: number
}

export const MountTransition: FC<Props> = ({
  children,
  slide = 0,
  slideUp = 0,
}) => (
  <motion.div
    exit={{ opacity: 0, x: slide, y: slideUp }}
    initial={{ opacity: 0, x: slide, y: slideUp }}
    animate={{ opacity: 1, x: 0, y: 0 }}
  >
    {children}
  </motion.div>
)

OpenIn.tsx

import { FC } from 'react'
import { motion, AnimatePresence } from 'framer-motion'

type Props = {
  slide?: number
  slideUp?: number
  isActive: boolean
}

export const OpenIn: FC<Props> = ({ children, isActive = false }) => (
  <AnimatePresence>
    {isActive && (
      <motion.div
        exit={{ opacity: 0, height: 0, overflow: 'hidden' }}
        initial={{ opacity: 0, height: 0, overflow: 'hidden' }}
        animate={{ opacity: 1, height: 'auto', overflow: 'visible' }}
      >
        {children}
      </motion.div>
    )}
  </AnimatePresence>
)

RouteTransition.tsx

import { FC } from 'react'
import { AnimatePresence } from 'framer-motion'
import { Route, Switch, useLocation } from 'react-router-dom'
import { MountTransition } from './MountTransition'

type Props = {
  exact?: boolean
  path: string
  slide?: number
  slideUp?: number
}

export const RouteTransition: FC<Props> = ({
  children,
  exact = false,
  path,
  slide = 0,
  slideUp = 0,
  ...rest
}) => (
  <Route exact={exact} path="/admang/service-center" {...rest}>
    <MountTransition slide={slide} slideUp={slideUp}>
      {children}
    </MountTransition>
  </Route>
)

type RoutesProps = {
  exitBeforeEnter?: boolean
  initial?: boolean
}

export const AnimatedRoutes: FC<RoutesProps> = ({
  children,
  exitBeforeEnter = true,
  initial = false,
}) => {
  const location = useLocation()
  return (
    <AnimatePresence exitBeforeEnter={exitBeforeEnter} initial={initial}>
      <Switch location={location} key={location.pathname}>
        {children}
      </Switch>
    </AnimatePresence>
  )
}

SlideIn.tsx

import { FC } from 'react'
import { motion, AnimatePresence } from 'framer-motion'

type Props = {
  slide?: number
  isActive: boolean
  key: string
}

export const SlideIn: FC<Props> = ({
  children,
  isActive = false,
  slide = 30,
  key = 'auniquestring',
}) => (
  <AnimatePresence>
    {isActive && (
      <motion.div
        key={key}
        exit={{ opacity: 0, x: slide }}
        initial={{ opacity: 0, x: slide }}
        animate={{ opacity: 1, x: 0 }}
      >
        {children}
      </motion.div>
    )}
  </AnimatePresence>
)

<Route exact={exact} path="/admang/service-center" {...rest}>

should be

<Route exact={exact} path={path} {...rest}>

right ?