ユーザーが戻るボタン (ブラウザー) を押したときにスクロール位置を維持するために、修正しようとしているページがあります。list というコンポーネントがあり、ユーザーにいくつかの製品を表示するとします。すべての製品を表示するには、ユーザーはリスト コンポーネントを下にスクロールできます。ユーザーが製品をクリックすると、アプリケーションはユーザーを詳細コンポーネントにリダイレクトします。次に、ユーザーがリストに戻ろうとしてブラウザの戻るボタンを押すと、リスト コンポーネントがレンダリングされ、自動的に一番上にスクロールするように見えます。
私の知る限り、ブラウザの戻るボタンを押すとwindow.history.back()アクションがトリガーされ、他には何も起こりません。
解決策として、scrollY 値を保存するアプリケーションのコンテキストに変数を実装し、レンダリングしようとしているコンポーネント (リスト コンポーネント) のcomponentWillMount(またはuseEffect) で、スクロール位置を値セットに設定しました。文脈で。
このスタックオーバーフローの投稿にコード全体を基づいているので、私のソリューションの詳細はこちらです: How to change scroll behavior while going back in next js?
いくつかのログを使用して値を確認したところ、スクロール位置はコンテキストに正しく保存されていますが、ウィンドウ イベント リスナーを使用しているため、リスト コンポーネントがレンダリングされた直後に値がゼロに設定されます。
私のコードでは、どのような種類のスクロール構成も使用していないため、その動作が Next.js または react のデフォルトのようなものであるかどうか疑問に思っていました。ユーザーがブラウザの戻るボタンを押したときに発生しますが、私は次の初心者であり、何かが欠けているのか、何が欠けているのかわかりません。この問題が React と関係があるのか どうかさえわかりません。 Next.js 自体。