reactjs - 通过导航更改的 ScrollToTop 不起作用
问题描述
我是 react 新手,当我从另一个向下滚动的页面导航到此页面时,我尝试编写一个用于滚动到页面顶部的功能组件。问题是,当我导航到打开的页面时,它不会滚动到顶部。
这就是功能:
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
try {
window.scroll({
top: 0,
left: 0,
behavior: "smooth"
});
} catch (error) {
window.scrollTo(0, 0);
}
}, [pathname]);
console.log(pathname);
return null;
}
在这里,我在 App.js 中调用它。教程说应该在路由器下调用。
import React from "react";
import { ThemeProvider } from "emotion-theming";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import GlobalStyles from "./GlobalStyles";
import { theme } from "./themes/theme";
import AppBar from "./components/Navigation/AppBar";
import FooterNav from "./components/Navigation/FooterNav";
import { MenuLink, BottomLink, FooterLink } from "./components/Navigation/NavLinks";
import Registration from "./pages/Registration";
import Program from "./pages/Program";
import Home from "./pages/Home";
import Workshops from "./pages/Workshops";
import Contact from "./pages/Contact";
import Impressum from "./pages/Impressum";
import Privacy from "./pages/Privacy";
import Attendees from "./pages/Attendees";
import ConferenceFee from "./pages/ConferenceFee";
import { Main } from "./components/Container/Main";
import { PageContainer } from "./components/Container/PageContainer";
import HeaderImage from "./components/Images";
import ScrollToTop from "./components/ScrollToTop";
function App() {
return (
<ThemeProvider theme={theme}>
<PageContainer>
<Router>
<ScrollToTop />
<GlobalStyles />
<AppBar>
<MenuLink to="/">Start</MenuLink>
<MenuLink to="/registration">Anmelden</MenuLink>
<MenuLink to="/conferencefee">Tagungsbeitrag</MenuLink>
<MenuLink to="/workshops">Workshops</MenuLink>
<MenuLink to="/program">Tagungsprogramm</MenuLink>
<MenuLink to="/contact">Kontakt/Tagungsbüro</MenuLink>
<MenuLink to="/impressum">Impressum</MenuLink>
<MenuLink to="/Privacy">Datenschutz</MenuLink>
</AppBar>
<Switch>
<Main>
<HeaderImage />
<Route exact path="/">
<Home />
</Route>
<Route path="/registration">
<Registration />
</Route>
<Route path="/conferencefee">
<ConferenceFee />
</Route>
<Route path="/program">
<Program />
</Route>
<Route path="/workshops">
<Workshops />
</Route>
<Route path="/contact">
<Contact />
</Route>
<Route path="/impressum">
<Impressum />
</Route>
<Route path="/privacy">
<Privacy />
</Route>
<Route path="/attendees">
<Attendees />
</Route>
</Main>
</Switch>
<FooterNav>
<FooterLink to="/impressum">Impressum</FooterLink>
<FooterLink to="/privacy">Datenschutz</FooterLink>
<BottomLink to="/attendees">Orga-Login</BottomLink>
</FooterNav>
</Router>
</PageContainer>
</ThemeProvider>
);
}
export default App;
也许有人知道,怎么了?
解决方案
我认为你只需要用 包装里面Router
的所有东西ScrollToTop
,而不是在里面放一个空组件Router
。
推荐阅读
- git - 如何防止源树中没有提交消息?
- ios - AppStore 图标变为全黑
- mongodb - MongoDB更新:-更新嵌套在数组中的多个对象(在多个文档中)
- database - 在数据库中查找所有用户定义的公共同义词
- java - 如何在使用 XSL-FO 生成另一个 PDF 文件时合并一个 PDF 文件?
- git - 在私有存储库中添加公共 github 存储库作为子模块将使子模块存储库成为私有
- javascript - “const”如何影响变量的类型?
- jquery - HTML 设计 - 用 div 替换表格
- django - 如何在 APIView 中设置密码 - Django
- python - 如何在文件路径中使用变量