реакция-маршрутизатор Ссылки не отвечает внутри пагинации пакета. Приходится нажимать несколько раз

Question

У меня проблемы с выяснением проблемы, которая возникла, когда я добавил нумерацию страниц в свое приложение реагирования. Рассматриваемый пакет для разбивки на страницы - это ответный крючок-пагинатор (документы здесь ). Ссылки находятся отдельно от пакета реакции-маршрутизатора (документы здесь ). Перед добавлением пакета разбивки на страницы ссылки работали нормально, нужно было только нажать на него один раз, и я смог перейти на нужную страницу в моем приложении. Однако после добавления пакета нумерации страниц ссылки внутри нумерации страниц перестали отвечать на запросы. Иногда при 10+ кликах по ссылке я все равно не регистрируюсь и go на нужной странице. кто-нибудь знает, почему это произошло? Есть ли здесь какая-то проблема совместимости?

Это один из примеров компонента в моем приложении, который использует как пакет пагинации, так и ссылки в реакции-маршрутизаторе. Еще раз, прежде чем я добавил пакет нумерации страниц, ссылки работали как задумано:

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import Paginator from "react-hooks-paginator";
import { CardColumns, Card, Row, Col, ListGroup, Form } from "react-bootstrap";
import axios from "axios";

function ProductListPublic(props) {
    const [isError, setIsError] = useState(false);
    const [products, setProducts] = useState([]);
    const [searchTerm, setSearchTerm] = useState("");
    const pageLimit = 9;
    const [offset, setOffset] = useState(0);
    const [currentPage, setCurrentPage] = useState(1);
    const [currentProducts, setCurrentProducts] = useState([]);

    const Product = props => (
        <Card>
            <Row>
                <Col md={{ span: 4 }}>
                    <Card.Title className="mt-4 text-center">
                        <Link to={`/products/list/${props.product._id}/`}>{props.product.name}</Link>
                    </Card.Title>
                </Col>
                <Col md={{ span: 8 }}>
                <ListGroup>
                    <ListGroup.Item className="text-truncate">{props.product.description}</ListGroup.Item>
                    {props.product.stock > 0 ? (
                        <ListGroup.Item>{props.product.stock} in stock</ListGroup.Item>
                    ) : (
                        <ListGroup.Item>Currently out of stock</ListGroup.Item>
                    )}
                </ListGroup>
                </Col>
            </Row>
        </Card>
    )

    useEffect(() => {
        let isMounted = true;
        axios.get("http://localhost:4000/products/")
        .then(res => {
            if (!isMounted) return // If element is unmounted, dont update the state
            setProducts(res.data);
            setCurrentProducts(products.slice(offset, offset + pageLimit));
        }).catch(function(err) {
            if (!isMounted) return // If element is unmounted, dont update the state
            setIsError(true);
        })
        return () => {
            isMounted = false
        }
    }, [offset, products]);

    function productList() {
        if(searchTerm) {
            return products.filter(product => product.name.includes(searchTerm)).map((currentProduct, i) => {
                return <Product product={currentProduct} key={i} />;
            });
        } else {
            return currentProducts.map(function(products, i) {
                return <Product product={products} key={i} />;
            })
        }
    }

    return (
        <div className="text-center">
            <h2>Products List</h2>
            <Form>
                <Form.Row className="justify-content-sm-center">
                    <Form.Group as={Col} sm={{ span: 6 }}>
                        <Form.Label htmlFor="formSearch">Search Products</Form.Label>
                        <Form.Control
                                    controlid="formSearch"
                                    type="text"
                                    value={searchTerm}
                                    onChange={e => {
                                        setSearchTerm(e.target.value);
                                    }}
                                    placeholder="Product Name (case sensitive)"
                                    />
                    </Form.Group>
                </Form.Row>
            </Form>
            <CardColumns>
                { productList() }
                {!searchTerm &&
                    <Paginator
                        totalRecords={products.length}
                        pageLimit={pageLimit}
                        pageNeighbours={2}
                        setOffset={setOffset}
                        currentPage={currentPage}
                        setCurrentPage={setCurrentPage}
                    />
                }
            </CardColumns>
            { isError &&<p>Something went wrong with getting the products!</p> }
        </div>
    )
}

export default ProductListPublic;