reactjs - 戻るボタンのスクロール位置を元に戻す

Question

ストアからデータを要求し、そのデータをマップしてコンポーネントのリストをレンダリングするルート ハンドラーがあります。私の問題は、別のページに移動してから戻ると、コンポーネントを再レンダリングする必要があるため、スクロール位置が復元されないことです。リストがレンダリングされるまでスクロール位置の設定を遅らせたり、何らかのナビゲーションでレンダリングされたコンポーネントの状態を保存および復元したりする方法はありますか?

Answer 1

可能であれば、レンダリングしているリストをキャッシュします。その後、戻る/スクロールは問題になりません。

リストをキャッシュできない場合は、次のように呼び出しで独自のものを提供できます。scrollBehaviorRouter.create

var router = Router.create({
  routes: routes,
  scrollBehavior: YourScrollBehavior
});

Answer 2

コンポーネントでwillTransitionToハンドラーを使用して、API からデータを非同期に取得するまでルート遷移を遅らせることができます。そうすれば、コンポーネントがすべてのデータで即座にレンダリングされるため、ルーターは正しいスクロール位置を復元できます。