（已解决）:-) 分页问题并重定向到新页面的顶部

Question

我们已在一个教程中将分页集成到我们的网站中。我在每个页面上都有一定数量的产品，并且有多个页面。当我在一个页面上向下滚动并点击将我重定向到另一个页面的按钮时，我将被重定向到新页面的底部，但我需要被重定向到该新页面的顶部。

根据此链接 - https://reactrouter.com/web/guides/scroll-restoration - 我应该创建一个名为 ScrollToTop.js 的新组件，然后我应该将 <ScrollToTop /> 标记添加到 App.js 文件中，但是当我这样做时，问题仍然存在。

（请注意，这个问题在开始时被标记为“已解决”，因为我在公开提出这个问题之前已经找到了解决方案，但我将它发布在 SO 上，这样我可以更好地跟踪它）

ScrollToTop.js -

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

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

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
} 

App.js -

import { Container } from "react-bootstrap";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Header from "./components/Header";
import Footer from "./components/Footer";
import ScrollToTop from "../components/ScrollToTop";

import HomeScreen from "./screens/HomeScreen";
import ProductScreen from "./screens/ProductScreen";
import CartScreen from "./screens/CartScreen";
import LoginScreen from "./screens/LoginScreen";
import RegisterScreen from "./screens/RegisterScreen";
import ProfileScreen from "./screens/ProfileScreen";
import ShippingScreen from "./screens/ShippingScreen";
import PaymentScreen from "./screens/PaymentScreen";
import PlaceOrderScreen from "./screens/PlaceOrderScreen";
import OrderScreen from "./screens/OrderScreen";
import UserListScreen from "./screens/UserListScreen";
import UserEditScreen from "./screens/UserEditScreen";
import ProductListScreen from "./screens/ProductListScreen";
import ProductEditScreen from "./screens/ProductEditScreen";
import OrderListScreen from "./screens/OrderListScreen";

function App() {
  return (
    <Router>
      <ScrollToTop />
      <Header />
      <main className="py-3">
        <Container>
          <Route path="/" component={HomeScreen} exact />
          <Route path="/login" component={LoginScreen} />
          <Route path="/register" component={RegisterScreen} />
          <Route path="/profile" component={ProfileScreen} />
          <Route path="/shipping" component={ShippingScreen} />
          <Route path="/placeorder" component={PlaceOrderScreen} />
          <Route path="/order/:id" component={OrderScreen} />
          <Route path="/payment" component={PaymentScreen} />
          <Route path="/product/:id" component={ProductScreen} />
          <Route path="/cart/:id?" component={CartScreen} />

          <Route path="/admin/userlist" component={UserListScreen} />
          <Route path="/admin/user/:id/edit" component={UserEditScreen} />

          <Route path="/admin/productlist" component={ProductListScreen} />
          <Route path="/admin/product/:id/edit" component={ProductEditScreen} />

          <Route path="/admin/orderlist" component={OrderListScreen} />
        </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

分页.js -

import React from 'react'
import { Pagination } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'

function Paginate({pages, page, keyword= '', isAdmin=false }) {
                                          
    if(keyword){
        keyword = keyword.split('?keyword=')[1].split('&')[0]
    }                      
                             
    return (pages > 1 && (
        <Pagination>
            {[...Array(pages).keys()].map((x) => (
                 <LinkContainer
                 key={x + 1}
                 to={!isAdmin ? 
                     `/?keyword=${keyword}&page=${x + 1}`
                     : `/admin/productlist/?keyword=${keyword}&page=${x + 1}`
                 }
                 >                          
                       <Pagination.Item active={x + 1 ===page}>{x + 1}</Pagination.Item>
                 </LinkContainer>              
            ))}
        </Pagination>
    )                            
        
    )
}

export default Paginate

Answer 1

这个问题可以通过创建 ScrollToTop.js 组件（在 components 文件夹内）来解决，正如提到的链接所暗示的那样，但不是将标签添加到 App.js 文件中，而是需要将其添加到分页中。 js 组件。这可以分两步完成。

（以下两个调整都可以从App.js文件中去掉）

1. 像这样将 ScrollToTop.js 组件导入到 Paginate.js 文件中 -

import ScrollToTop from "./ScrollToTop";

或者像这样 -

import ScrollToTop from "../components/ScrollToTop";

1. 将<ScrollToTop />标签添加到Paginate.js组件中，如下图-（在<Pagination>标签正下方添加）

import React from 'react'
import { Pagination } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
import ScrollToTop from "../components/ScrollToTop";

function Paginate({pages, page, keyword= '', isAdmin=false }) {

    if(keyword){
        keyword = keyword.split('?keyword=')[1].split('&')[0]
    }                      

    return (pages > 1 && (
        <Pagination>
            <ScrollToTop />
            {[...Array(pages).keys()].map((x) => (
                 <LinkContainer
                 key={x + 1}
                 to={!isAdmin ? 
                     `/?keyword=${keyword}&page=${x + 1}`
                     : `/admin/productlist/?keyword=${keyword}&page=${x + 1}`
                 }
                 >                          
                       <Pagination.Item active={x + 1 ===page}>{x + 1}</Pagination.Item>
                 </LinkContainer>              
            ))}
        </Pagination>
    )                            

    )
}

export default Paginate