私は React 18 と Movie Database (TMDB) API を使用して SPA を開発しています。
現在、Framer Motion を使用して、ルート (ページ)間に トランジションを追加しています。
これを行うために、次の内容を含む transition.js ファイルを /src に追加しました。
リーリー
を使用して、上記の transition をアプリケーションのコンポーネントにインポートし、エクスポートされたコンポーネントをその中でラップします。例として Movielist コンポーネントを参照してください:
リーリー
App.js には「通常の」ルートがあります:
サンドボックス
です。 ＃＃＃質問＃＃＃ #exportdefaultmyComponent
をレンダリングできなくなります。
＃＃＃編集＃＃＃
＃＃＃こちらです...＃＃＃
リーリー
これは エラー : をスローします
スムーズなページ遷移 を追加するまでは、 はすべて正常に動作していました。
＃＃＃質問＃＃＃この問題を解決する最も信頼できる方法は何ですか?私は何を間違えたのでしょうか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
このエラーは、
リーリーtransition関数から返された関数がコンポーネントをレンダリングせず、代わりにunknownを返すために発生します。この問題を解決するには、中括弧を削除するか、内部関数の明示的な戻り値を定義します。
明示的なリターン
リーリーあなたがやりたいことは (それがやりたいことのようです、よかったです!) は、ページ コンポーネントを 上位コンポーネント を作成することだと思います。 from Framermotion of code>motion.div これにより、コンポーネントが変換されます。
リーリー変換コードを次のように変更してみてください:その後、ページ コンポーネントを
リーリーTransitioningComponentパラメーターとしてwithTransitionに渡して呼び出し、jsx ファイルからエクスポートできます。作業コードサンドボックスをご覧ください ここで
これは実際の動作の gif です
axios から引き続き発生する404
この回答がお役に立てば幸いです!エラーは、codesandbox.envファイルに保存されている API キーの有効期限が切れていることが原因です。 403 - アクセス拒否応答が原因でクエリが失敗したと思います。確認していませんが、これが私にとって最も意味のあることです。変換が機能しているのがわかるように、axios 呼び出しの一部をコメントアウトしました。