react-paginate中hrefBuilder的作用是什么？如何点击分页按钮生成新链接

DevOps 小满

2026-10-1

react-paginate的hrefBuilder属性说明及实现方案

hrefBuilder属性的作用

该属性是用于自定义分页按钮跳转链接的回调函数：

接收当前页码作为入参
你需要返回对应的URL字符串，组件内部会自动将这个字符串设置为分页按钮对应<a>标签的href属性
不需要你自己返回<a>标签元素，你当前写法返回JSX的逻辑是错误的，会导致href属性异常。

点击生成对应新链接的实现方法

你只需要修正hrefBuilder的返回值，输出符合你需求的URL字符串即可，示例如下：

// 示例：生成分页链接格式为 /article?page=1、/article?page=2...
<ReactPaginate
  hrefBuilder={(currentPage) => `/article?page=${currentPage}`}
  previousLabel={"previous"}
  nextLabel={"next"}
  breakLabel={"..."}
  pageCount={pageCount}
  marginPagesDisplayed={2}
  pageRangeDisplayed={3}
  onPageChange={handlePageClick}
  containerClassName={"pagination justify-content-center my-5 "}
  pageClassName={"page-item"}
  pageLinkClassName={"page-link"}
  previousClassName={"page-item"}
  previousLinkClassName={"page-link"}
  nextClassName={"page-item"}
  nextLinkClassName={"page-link"}
  breakClassName={"page-item"}
  breakLinkClassName={"page-link"}
  activeClassName={"active"}
/>

客户端路由无刷新跳转补充说明

如果你使用的是React Router等客户端路由框架，不需要整页刷新跳转，可以在onPageChange回调中补充路由跳转逻辑：

import { useNavigate } from 'react-router-dom';

// 组件内部逻辑
const navigate = useNavigate();
const handlePageClick = (pageData) => {
  // react-paginate的onPageChange返回的selected页码从0开始，需+1对应实际页码
  const targetPage = pageData.selected + 1;
  // 执行客户端跳转
  navigate(`/article?page=${targetPage}`);
  // 其余业务逻辑：拉取对应页数据等
}