I cant use framer motion when using <navigate/> react router dom v6 to auth my login page

Question

i need Help please!!

the animation in login page loading normal, but when i using in the AuthRoute to check auth for example link... i cant see the animation when redirect :(((

this my code

authRoute.tsx

    import { useAppSelector } from "app/hooks";
    import { AnimatePresence } from "framer-motion";
    import React from "react";
    import { Navigate, Outlet,useLocation } from "react-router-dom";
    interface Props {}
    const AuthRoute = (props: Props) => {
    const location = useLocation();
    const userType = useAppSelector(
    (state) => state.LoginReducer.currentUser?.userType
    );
    if (userType === "user") {
    return <Navigate to="/signUp" state={{from:location}} replace />
    } else if (userType === "admin") {
    return <Navigate to="/admin" state={{from:location}} replace />;
    } else return <Outlet />;
    };
    export default AuthRoute;

app.tsx

import { ThemeProvider } from "@mui/material/styles";
import { NotFound } from "component/common";
import { AnimatePresence } from "framer-motion";
import LoginPage from "pages/Login/Login";
import SignUpPage from "pages/SignUp/SignUp";
import React from "react";
import { useLocation } from "react-router";
import { Route, Routes } from "react-router-dom";
import AuthRoute from "Routes/AuthRoute";
import { lightTheme } from "theme";
import "./App.css";

function App() {
  const location = useLocation();

  return (
    <ThemeProvider theme={lightTheme}>
      <AnimatePresence exitBeforeEnter>
        <Routes location={location} key={location.pathname}>
          {/* check user at localstorage and redirect to login form */}
          {/* check user login and redirect to home page */}
          <Route element={<AuthRoute />}>
            <Route path="/login" element={<LoginPage />} />
          </Route>
          <Route path="/signUp" element={<SignUpPage />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </AnimatePresence>
    </ThemeProvider>
  );
}

export default App;

I'm really confused as I tried many ways but it doesn't work

Answer 1

As I understand and i'm not 100% sure about AnimatePresence but it will be triggered only once when the whole App set, so try to remove AnimatePresence as a parent for all the routes and put in your needed component like this:

<Route path="/login" element={
    <AnimatePresence exitBeforeEnter>
        <LoginPage />
    </AnimatePresence>
} />