ScrollToTop通过导航更改不起作用

问题描述 投票:0回答:1

我是React的新手,当我从另一个向下滚动的页面导航到该页面时,我试图编写一个功能组件以滚动到页面顶部。问题是,当我导航到打开的页面时,它不会滚动到顶部。

我使用了thisthis教程。

即功能:

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;

也许有人知道,怎么了?

reactjs
1个回答
0
投票

思考您只需要用Router将所有内容包装在ScrollToTop中,而不是将空组件放在Router中。

© www.soinside.com 2019 - 2024. All rights reserved.