React Router v6 - 保留滚动位置

Question

我有一个显示用户提要的主页。当用户单击其中一张提要卡时，它会转到另一个 url，当用户返回主页时，它会滚动到顶部。我想保留主页的滚动位置，以便用户可以从以前的滚动位置继续滚动。

我尝试使用此方法，但它不适用于 Router v6

Answer 1

创建一个组件来管理提要的状态，例如stateSaver.js:

const state = {}

export const saveState = (component, object) => {
    
    state[component] = object
    
}

export const getState = (component) => {
    
    return state[component]
    
}

然后，在您的 feed.js 中，检索滚动位置并使用侦听器更新它：

import { getState, saveState } from './stateSaver';

useEffect(() => {
        
    if(getState('Feed')){
     
        let { scrollY } = getState('Feed')
        
        window.scrollTo(0, scrollY), 200)
        
    }
    
}, [])


useEffect(() => {
    
    const save = () => {
        
        saveState('Feed', {  scrollY: window.pageYOffset  })        
        
    }
    
    save()
    
    document.addEventListener('scroll', save)
    
    return () => document.removeEventListener('scroll', save)
    
}, [])

该解决方案假设您使用的是单个 Web 应用程序。

React Router v6 - 保留滚动位置

React Router v6 - preserve scroll position

typescript

reactjs

react-router

react-router-dom