이 React 18 애플리케이션에서 전환(myComponent)이 실패하는 원인은 무엇입니까?

Question

저는 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)

부드러운 페이지 전환을 추가하기 전까지는 모든 것이 잘 작동했습니다.

질문

1. 내가 뭘 잘못했나요?
2. 이 문제를 해결하는 가장 확실한 방법은 무엇입니까?

Answer 1

transition函数返回的函数没有渲染组件；它返回 undefined와 반대로 인해 오류가 발생합니다.

으아아아

이 문제를 해결하려면 중괄호를 제거하거나 내부 함수에 대한 명시적 반환을 정의하면 됩니다.

명시적으로 반환

으아아아

Answer 2

제 생각에 당신이 원하는 것은(당신이 원하는 것이 바로 그것이군요, 수고하셨습니다!) 당신을 위해 구성 요소를 변환할 수 있도록 高阶组件 将您的页面组件包装在 framermotion 的 code>motion.div을 만드는 것입니다.

코드를 转换다음으로 변경해 보세요:

으아아아

그런 다음 페이지 구성 요소를 TransitioningComponent 参数传递给 withTransition로 전달하고 jsx 파일에서 내보내어 호출할 수 있습니다.

으아아아

작동 코드 샌드박스 보기 여기

여기에 실제 작동하는 GIF가 있습니다

이 문제는 axios에서 계속 수신하는

파일에 저장된 API 키가 만료되었기 때문에 발생합니다. 403 - 액세스 거부 응답으로 인해 쿼리가 실패한 것 같습니다. 확인하지는 않았지만 이것이 나에게 가장 의미가 있습니다. 변환이 작동하는 것을 볼 수 있도록 일부 axios 호출을 주석 처리했습니다. 404 错误是由于codesandbox .env

이 답변이 도움이 되기를 바랍니다!