使用時我不能使用成幀器運動<navigate />反應路由器 dom v6 以驗證我的登錄頁面

Question

我需要幫助！

登錄頁面中的 animation 加載正常，但是當我在 AuthRoute 中使用來檢查 auth 例如鏈接...我在重定向時看不到 animation:(((

這是我的代碼

授權路線.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;

應用程序.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;

我真的很困惑，因為我嘗試了很多方法但它不起作用

Answer 1

據我了解，我對 AnimatePresence 不是 100% 確定，但它只會在整個 App 設置時觸發一次，因此請嘗試刪除 AnimatePresence 作為所有路由的父級並像這樣放入您需要的組件：

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