framer-motion을 사용하여 애니메이션 경로 경로를 만들려고 하는데 구성요소가 표시되지 않고, RouteWithAnimation.js에서 Home, Contact 및 about 경로를 확인할 수 없다는 오류가 발생하는 것 같습니다.

"기본값 내보내기"와 "내보내기"를 사용해 보았지만 여전히 동일합니다. 또한 괄호가 있거나 없는 구성 요소를 가져오려고 했는데 같은 오류가 다시 발생했습니다. 구성 요소와 경로 이름이 일치하는지 확인하고 반응 라우터-dom도 구현했습니다. App.js 입니다

여기가 집이에요 js

연락처입니다

about.js입니다

import { useLocation } from "react-router-dom";
import { Home } from "./components/Home";
import { About } from "./components/About";
import { Contact } from "./components/Contact";
import { Routes, Route } from "react-router-dom";

function RoutesWithAnimation() {
  const location = useLocation();
  return (
    <Routes location={location} key={location.key}>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default RoutesWithAnimation;