Блог

Мы интегрировали разбиение на страницы на нашем веб — сайте в одном учебном пособии. У меня есть определенное количество продуктов на каждой странице, и их несколько. Когда я прокручиваю вниз одну страницу и нажимаю кнопку, которая перенаправляет меня на другую страницу, я перенаправляюсь в нижнюю часть новой страницы, но мне нужно будет перенаправиться в верхнюю часть этой новой страницы.

Согласно этой ссылке — https://reactrouter.com/web/guides/scroll-restoration — Я должен создать новый компонент под названием ScrollToTop.js а затем я должен добавить <ScrollToTop /> тег в App.js файл, но когда я это делаю, проблема сохраняется.

(Пожалуйста, обратите внимание, что этот вопрос был помечен как «Решенный» еще в начале, потому что я нашел решение, прежде чем задавать этот вопрос публично, но я публикую его здесь, чтобы я мог лучше отслеживать его)

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;
 

Paginate.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('amp;')[0]
    }                      
                             
    return (pages > 1 amp;amp; (
        <Pagination>
            {[...Array(pages).keys()].map((x) => (
                 <LinkContainer
                 key={x   1}
                 to={!isAdmin ? 
                     `/?keyword=${keyword}amp;page=${x   1}`
                     : `/admin/productlist/?keyword=${keyword}amp;page=${x   1}`
                 }
                 >                          
                       <Pagination.Item active={x   1 ===page}>{x   1}</Pagination.Item>
                 </LinkContainer>              
            ))}
        </Pagination>
    )                            
        
    )
}

export default Paginate
 

Эту проблему можно решить, создав ScrollToTop.js компонент (внутри папки компонентов), как следует из упомянутой ссылки, но вместо добавления тега в App.js файл, необходимо добавить его в Paginate.js компонент. Это можно сделать в 2 этапа.

(Обе из следующих настроек могут быть удалены из App.js файл)

1. Импортируйте ScrollToTop.js компонент для Paginate.js файл, подобный этому —

 import ScrollToTop from "./ScrollToTop";
 

или вот так —

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

2. Добавьте <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('amp;')[0]
    }                      

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

    )
}

export default Paginate