我正在尝试使用react-router dom v6滚动到每个页面更改的顶部。该代码仅在我的主页上滚动回到顶部,而不是在我的角色详细信息页面上滚动。我尝试了很多解决方案,但无法让它们发挥作用。我正在使用“react-router-dom”:“^6.2.2”,
这是我到目前为止所取得的成就:
ScrollToTop.js:
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop({ children }) {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return children;
}
Run Code Online (Sandbox Code Playgroud)
我的应用程序.js
<Router>
<ScrollToTop>
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/character/:char_id" element={<CharacterDetail />} />
<Route path='*' element={<PageNotFound />} />
</Routes>
<Footer />
</ScrollToTop>
</Router>
Run Code Online (Sandbox Code Playgroud)
我还尝试使用 'window.scrollTo(0, 0);' 直接执行我的组件 并滚动到我的 useEffect 中的 ID,但没有成功。感谢您的指导。