我是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
中。