react-router v6 切换路由无法自动滚动顶部

陈楠112

2022-04-14 761 阅读1分钟

网上大多解决方案都没用，别信 **DN！！！

我网上找了很多解决方案，但对于我来说无法解决

最终发现了一个解决方案有用的

思路：封装一个自动滚动至屏幕顶部的组件（检查 useLayoutEffect 中的位置变化，如果有更改，那么就自动滚动至屏幕顶部，坐标为：0, 0），然后将你的路由 <Routes> ... </Routes> 包起来。

开始封装：

新建一个文件 AutoScrollToTop（你们也可以不用新建，我比较喜欢组件化，所以就新建一个文件）\

import { useLayoutEffect } from 'react'
import { useLocation } from 'react-router'

const AutoScrollToTop = ({ children }) => {
  const location = useLocation()
  useLayoutEffect(() => {
    document.documentElement.scrollTo(0, 0)
  }, [location.pathname])
  return children
}

export default AutoScrollToTop

如何使用

在你的路由文件里引入刚刚写的 AutoScrollToTop
然后把路由包起来

import React from 'react'
// 其他导入
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import AutoScrollToTop from '<你的路径>/AutoScrollToTop.jsx'

function App() {
  return (
    <Router>
      <AutoScrollToTop>
        <Routes>
          <Route path='/' element={<Layout />}>
            <Route index element={<Home />} />
            <Route path='a' element={<A />} />
            <Route path='b' element={<B />} />
          </Route>
          <Route path='*' element={<NotFound />} />
        </Routes>
      </AutoScrollToTop>
    </Router>
  )
}

export default App

完。