routeTransition

index.js

import React from 'react'
import { AnimatePresence } from 'framer-motion'
import { useSelector } from 'react-redux'
import { Route, Switch, useLocation, Redirect } from 'react-router-dom'
import { MountTransition } from '../MountTransition'

export const RouteTransition = ({
  children,
  exact = false,
  path,
  slide = 0,
  slideUp = 0,
  ...rest
}) => {
  const authUser = useSelector(store => store.authUser.user.authSuccess)
  if (authUser) {
    return (
      <Route exact={exact} path={path} {...rest}>
        <MountTransition slide={slide} slideUp={slideUp}>
          {children}
        </MountTransition>
      </Route>
      )
  } else {
    return (
      <Redirect
      to={{
        pathname: '/login',
        state: {
          demo: true,
        }
      }}
    />
    )
  }
}

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