React Bootstrap Pagination.Item始终激活异常求助

这肯定不是预期行为，问题出在两个核心点：

原因1：LinkContainer的默认匹配逻辑错误激活所有项 #

react-router-bootstrap的LinkContainer默认只匹配路由的pathname部分，不会识别search查询参数。你的非管理员分页链接pathname都是'/'，所以不管当前页面的page参数是多少，所有LinkContainer都会判定自己和当前路由匹配，自动给子组件Pagination.Item加上active类，导致所有页码都显示激活状态。

原因2：手动active判断存在类型不匹配 #

你代码里已经把page转成了数字类型的current_page，但判断active时却用了(x + 1) === page。如果page是从URL查询参数拿到的字符串（比如"1"），数字1和字符串"1"用===比较会返回false，导致手动设置的active完全失效，只能依赖LinkContainer的错误匹配逻辑。

修复方案（二选一即可） #

方案1：修改LinkContainer的匹配逻辑（推荐） #

给LinkContainer添加isActive属性，自定义匹配规则，让它同时校验pathname和search：

<LinkContainer
  key={x + 1}
  to={
    !isAdmin
      ? {
          pathname: '/',
          search: `?keyword=${keyword}&page=${x + 1}`,
        }
      : {
          pathname: '/admin/productlist/',
          search: `?keyword=${keyword}&page=${x + 1}`,
        }
  }
  isActive={(match, location) => {
    // 确保pathname和查询参数完全匹配才激活
    return match?.pathname === location.pathname && match?.search === location.search;
  }}
>
  <Pagination.Item>{x+1}</Pagination.Item>
</LinkContainer>

这样不需要手动设置active属性，LinkContainer会准确匹配当前完整路由，只有对应页码的Item会被激活。

方案2：改用普通Link组件，手动控制激活状态 #

如果不想依赖LinkContainer的自动匹配，可以直接用react-router-dom的Link组件，同时修正active的判断逻辑：

// 先导入Link组件
import { Link } from 'react-router-dom';

// ...

<Link
  key={x + 1}
  to={
    !isAdmin
      ? {
          pathname: '/',
          search: `?keyword=${keyword}&page=${x + 1}`,
        }
      : {
          pathname: '/admin/productlist/',
          search: `?keyword=${keyword}&page=${x + 1}`,
        }
  }
>
  <Pagination.Item active={(x + 1) === parseInt(page)}>{x+1}</Pagination.Item>
</Link>

这里用parseInt(page)把字符串类型的page转成数字，确保和x+1（数字）的===比较有效，手动控制激活状态。

内容的提问来源于stack exchange，提问作者Chai Yon Xing