如何在NextJS中借助Router为分页元素设置Active类

你的判断逻辑失效核心原因是类型不匹配：router.query.page从URL获取的是字符串类型，而arrayPages里的页码是数字类型，用===（全等判断要求值和类型都一致）自然无法匹配。另外，map遍历里直接用当前项p比arrayPages[index]更简洁，没必要额外通过索引取数组元素。

修复后的代码 #

const arrayPages = [1, 2, 3, 4, 5, 6, 7, 8]
// 统一类型：把路由中的page转为数字，同时处理无page参数的默认情况
const currentPage = Number(router.query.page) || 1

arrayPages.map((p) => (
  <li
    key={p} // 用唯一的页码作为key，比index更符合React渲染规范
    className={`page-item number-item ${p === currentPage ? 'active' : ''}`}
  >
    <Link href={`${loadMoreParams.concat(`&page=${p}`)}`} passHref>
      <a className="page-link">{p}</a>
    </Link>
  </li>
))

关键修改点 #

• 类型统一：通过Number(router.query.page)将URL中的字符串页码转为数字，|| 1处理初始无page参数的场景（默认选中第1页）。
• 简化判断逻辑：直接用遍历项p和统一类型后的currentPage对比，代码更直观易读。
• 优化key值：用唯一的页码p作为React元素的key，避免使用index带来的列表重排渲染问题。

如果需要处理路由参数为非数字的异常情况，可以补充校验：

const currentPage = !isNaN(Number(router.query.page)) ? Number(router.query.page) : 1

内容的提问来源于stack exchange，提问作者Kirasiris