我想建立分页的正确方式，是搜索引擎优化友好和谷歌喜欢。从做我的研究，似乎有很多不正确的内容在那里，虽然它的工作，是穷人的搜索引擎优化。我假设，因为我的搜索引擎优化友好的要求，我不能使用任何状态来管理下一个/上一个页面链接等，我希望页面使用URL参数来确定页码（例如/something？page=2）。听起来像/something/page/2也可以接受，但我更喜欢URL参数，特别是Facebook似乎使用它，所以这一定是一个很好的方法。
问题是我的解决方案似乎必须使用<a/>标记，这显然在单击时会低效地重新加载整个页面。当我尝试将a标记替换为Link标记时，分页停止工作，并且在单击prev/next链接时组件不会重新呈现（但奇怪的是，根据react dev工具，重新渲染了所有其他不在此演示中的组件，所以某些关键部分肯定是错误的）。
下面是我的分页器组件：

interface PaginatorProps {
    currentPage: number;
    itemCount: number;
    itemsPerPage?: number;
    path: string;
}

export const Paginator: FC<PaginatorProps> = ({
    currentPage,
    itemCount,
    itemsPerPage,
    path,
}) => {
    const totalPages: number = Math.ceil(itemCount / itemsPerPage);
    const disablePrev: boolean = currentPage <= 1;
    const disableNext: boolean = currentPage >= totalPages; // is last page (or 'above')

    if (totalPages <= 1 || !totalPages || !itemsPerPage || currentPage > totalPages) {
         return null;
    }

    let next: string = path,
        prev: string = path;

    if (currentPage + 1 <= itemCount) {
        next = `${path}?page=${currentPage + 1}`;
    }

    if (currentPage - 1 >= 1) {
        prev = `${path}?page=${currentPage - 1}`;
    }

    return (
        <div>
            <Link to={prev} className={`${disablePrev ? 'disabled' : ''}`}>
                Prev
            </Link>

            <span className={'paginationStyles.currentPage'}>
                Page {currentPage} of {totalPages}
            </span>

            <Link to={next} className={`${disableNext ? 'disabled' : ''}`}>
                Next
            </Link>
        </div>
    );
};

以及使用它的示例组件：

export const DataList = () => {
    const itemsPerPage: number = 3;
    const urlParams: URLSearchParams = new URLSearchParams(window.location.search);
    const currentPage: number = Number(urlParams.get('page')) || 1;
    const skip: number = (currentPage - 1) * itemsPerPage;
    const { dataCount, data, loading, error } = useGetDataList({ limit: itemsPerPage, skip });

    if (loading) return <Loading />;
    if (error) return <Error msg={error} />;
    if (!data?.length) return <p>No data found...</p>;

    return (
        <>
            <ul>
                {data.map(({ email }) => (
                    <li key={email}>{email}</li>
                ))}
            </ul>
            <Paginator
                currentPage={currentPage}
                itemCount={dataCount}
                itemsPerPage={itemsPerPage}
                path='/user/profile/affiliate/data-list'
            />
        </>
    );
};

有人知道如何使它重新呈现组件并正确分页吗？或者这本身就是错误的方法吗？