反應路由器 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。