この React 18 アプリケーションでtransition(myComponent) が失敗する原因は何ですか?

Question

私は React 18 と Movie Database (TMDB) API を使用して SPA を開発しています。

現在、Framer Motion を使用して、ルート (ページ)間に トランジションを追加しています。

これを行うために、次の内容を含む transition.js ファイルを /src に追加しました。 リーリー

import transition from '../../transition'

を使用して、上記の transition をアプリケーションのコンポーネントにインポートし、エクスポートされたコンポーネントをその中でラップします。例として Movielist コンポーネントを参照してください: リーリー App.js には「通常の」ルートがあります:

リーリー

サンドボックス

サンドボックスがあります。コードは

ここ

です。 ＃＃＃質問＃＃＃ #exportdefaultmyComponent

を

exportdefaulttransition(myComponent)

に変更すると、コンポーネント

レンダリングできなくなります。 ＃＃＃編集＃＃＃ ＃＃＃こちらです...＃＃＃ リーリー これは エラー : をスローします

リクエストが失敗しました、ステータス コード 404 AxiosError: リクエストが失敗しました ステータスコード 404 解決時 (http://localhost:3000/static/js/bundle.js:63343:12) XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:62034:66)

スムーズなページ遷移 を追加するまでは、 はすべて正常に動作していました。

＃＃＃質問＃＃＃

私は何を間違えたのでしょうか?

この問題を解決する最も信頼できる方法は何ですか?

Answer 1

このエラーは、transition 関数から返された関数がコンポーネントをレンダリングせず、代わりに unknown を返すために発生します。

リーリー

この問題を解決するには、中括弧を削除するか、内部関数の明示的な戻り値を定義します。

明示的なリターン

リーリー

Answer 2

あなたがやりたいことは (それがやりたいことのようです、よかったです!) は、ページ コンポーネントを < でラップする 上位コンポーネント を作成することだと思います。 from <来自 Framermotion of code>motion.div これにより、コンポーネントが変換されます。

変換 コードを次のように変更してみてください:

リーリー

その後、ページ コンポーネントを TransitioningComponent パラメーターとして withTransition に渡して呼び出し、jsx ファイルからエクスポートできます。

リーリー

作業コードサンドボックスをご覧ください ここで

これは実際の動作の gif です

axios から引き続き発生する

404 エラーは、codesandbox .env ファイルに保存されている API キーの有効期限が切れていることが原因です。 403 - アクセス拒否応答が原因でクエリが失敗したと思います。確認していませんが、これが私にとって最も意味のあることです。変換が機能しているのがわかるように、axios 呼び出しの一部をコメントアウトしました。

この回答がお役に立てば幸いです!