저는 React 18과 Movie Database(TMDB) API를 사용하여 SPA를 개발해 왔습니다.
이제 Framer Motion의 도움으로 경로 간 전환(페이지)을 추가하고 있습니다.
이를 위해 다음 콘텐츠가 포함된 /src 中添加了一个 transition.js 파일을 만들었습니다.
나는 import transition from '../../transition' 将上述 transition을 사용하여 응용 프로그램의 구성 요소를 가져오고 내보낸 구성 요소를 그 안에 래핑합니다. 예를 들어 Movielist 구성 요소를 참조하세요.
App.js에는 "정상" 경로가 있습니다:
으아아아샌드박스가 있고 코드는 여기에 있습니다.
교체 export default myComponent 更改为 export default transition(myComponent)하면 구성요소를 렌더링할 수 없게됩니다.
이렇게 하세요...
으아아아이 오류 가 발생합니다:
요청 실패, 상태 코드 404 AxiosError: 요청 실패 상태 코드 404 해결 시(http://localhost:3000/static/js/bundle.js:63343:12) XMLHttpRequest.onloadend에서 (http://localhost:3000/static/js/bundle.js:62034:66)
부드러운 페이지 전환을 추가하기 전까지는 모든 것이 잘 작동했습니다.
P粉4329300812024-03-29 16:08:40
transition函数返回的函数没有渲染组件；它返回 undefined와 반대로 인해 오류가 발생합니다.
이 문제를 해결하려면 중괄호를 제거하거나 내부 함수에 대한 명시적 반환을 정의하면 됩니다.
명시적으로 반환
으아아아P粉7640035192024-03-29 10:18:19
제 생각에 당신이 원하는 것은(당신이 원하는 것이 바로 그것이군요, 수고하셨습니다!) 당신을 위해 구성 요소를 변환할 수 있도록 高阶组件 将您的页面组件包装在 <来自 framermotion 的 code>motion.div을 만드는 것입니다.
코드를 转换다음으로 변경해 보세요:
그런 다음 페이지 구성 요소를 TransitioningComponent 参数传递给 withTransition로 전달하고 jsx 파일에서 내보내어 호출할 수 있습니다.
작동 코드 샌드박스 보기 여기
여기에 실제 작동하는 GIF가 있습니다이 문제는 axios에서 계속 수신하는
파일에 저장된 API 키가 만료되었기 때문에 발생합니다. 403 - 액세스 거부 응답으로 인해 쿼리가 실패한 것 같습니다. 확인하지는 않았지만 이것이 나에게 가장 의미가 있습니다. 변환이 작동하는 것을 볼 수 있도록 일부 axios 호출을 주석 처리했습니다. 404 错误是由于codesandbox .env