反应路由器 dom 版本 6.3.0 中的导航无法正常工作

Question

我正在开发响应网站，并且在导航到任何页面时遇到问题，例如，当我滚动到主页中的某个点时，我尝试导航到另一个页面，我发现另一个页面是从底部呈现的页面不是顶部

路线.tsx 文件

const App: React.FC = () => (
  <BrowserRouter>
    <Layout className="layout">
      <div style={{ marginBottom: "64px" }}>
        <Header>
          <AppHeader />
        </Header>
      </div>
      <Content>
        <div className="site-layout-content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/offers" element={<Login />} />
            <Route path="/aboutUs" element={<AboutUs />} />
            <Route path="/contactUs" element={<ContactUs />} />
            <Route path="/placeDetails/:id" element={<PlaceDetails />} />
            <Route path="/advantages" element={<Advantages />} />
          </Routes>
        </div>
      </Content>
      <Footer style={{ textAlign: "center" }}>
        <AppFooter />
      </Footer>
    </Layout>
  </BrowserRouter>
);
export default App;

header.tsx

const Index = () => {
  const navigate = useNavigate();
  return (
    <Row className="header">
      <Col span={12} className="header__logo">
        <div className="header__logo--imgContainer" onClick={() => navigate("/")}>
          <img src={logoImg} alt="logo" />
        </div>
      </Col>
      <Col span={12} className="header__menu">
        <ul className="ant-menu-overflow ant-menu ant-menu-root ant-menu-horizontal ant-menu-light ant-menu-rtl">
          <li className="ant-menu-item">
            <span onClick={() => navigate("/offers")}>{strings.header.offers}</span>
          </li>
          <li className="ant-menu-item">
            <span onClick={() => navigate("/advantages")}>{strings.header.services}</span>
          </li>
        </ul>
      </Col>
    </Row>
  );
};

export default Index;

Answer 1

您可以简单地将此帮助组件用于此用例：

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    // "document.documentElement.scrollTo" is the magic for React Router Dom v6
    document.documentElement.scrollTo({
      top: 0,
      left: 0,
      behavior: "instant", // Optional if you want to skip the scrolling animation
    });
  }, [pathname]);

  return null;
}

然后您可以像这样更改上面的代码：

const App: React.FC = () => (
  <BrowserRouter>
    <ScrollToTop/> // this is new helper component
    <Layout className="layout">
      <div style={{ marginBottom: "64px" }}>
        <Header>
          <AppHeader />
        </Header>
      </div>
      <Content>
        <div className="site-layout-content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/offers" element={<Login />} />
            <Route path="/aboutUs" element={<AboutUs />} />
            <Route path="/contactUs" element={<ContactUs />} />
            <Route path="/placeDetails/:id" element={<PlaceDetails />} />
            <Route path="/advantages" element={<Advantages />} />
          </Routes>
        </div>
      </Content>
      <Footer style={{ textAlign: "center" }}>
        <AppFooter />
      </Footer>
    </Layout>
  </BrowserRouter>
);
export default App;

每当路线更改时，这将重置顶部的滚动 position。