Next.js使用react-paginate分页时访问pathname触发报错

报错TypeError: Cannot create property 'page' on string '?page=1'的核心触发逻辑：

• 原生location.search的返回值是?key=value格式的纯字符串，并非可挂载属性的对象，直接对字符串执行currentQuery.page = xxx的赋值操作必然触发类型错误。
• Next.js项目中直接操作原生location对象无法和内置路由状态同步，本身就不是推荐写法。

1. 优先使用Next.js内置路由能力获取路径和查询参数，不要直接操作原生location对象
2. 拿到查询参数后先做浅拷贝再修改，不要直接改路由返回的原始状态
3. 修正拼写错误：原代码中pagginationHandler为拼写失误，正确拼写为paginationHandler，避免后续维护踩坑

Pages Router 场景正确代码 #

// 组件顶部引入路由hook
import { useRouter } from 'next/router';

// 组件内部初始化路由实例
const router = useRouter();

const paginationHandler = (page) => {
  const currentPath = router.pathname;
  // 浅拷贝原有查询参数，避免直接修改路由原始状态
  const currentQuery = { ...router.query };
  // react-paginate返回的selected下标从0开始，业务页码需要+1
  currentQuery.page = page.selected + 1;

  router.push({
    pathname: currentPath,
    query: currentQuery,
  });
};

// 组件使用部分保持原有逻辑即可，建议异步加载总页数时给组件加key保证初始页码正确
<ReactPaginate
  previousLabel={'previous'}
  nextLabel={'next'}
  breakLabel={'...'}
  breakClassName={'break-me'}
  activeClassName={'active'}
  containerClassName={'pagination'}
  subContainerClassName={'pages pagination'}
  initialPage={user.totalcount.currentPage - 1}
  pageCount={user.totalcount.pageCount}
  marginPagesDisplayed={2}
  pageRangeDisplayed={5}
  onPageChange={paginationHandler}
  key={user.totalcount.currentPage}
/>

App Router（Next.js 13+ app目录）场景适配代码 #

// 组件顶部引入App Router对应的hooks
import { usePathname, useSearchParams, useRouter } from 'next/navigation';

// 组件内部初始化路由相关实例
const pathname = usePathname();
const searchParams = useSearchParams();
const router = useRouter();

const paginationHandler = (page) => {
  const params = new URLSearchParams(searchParams);
  params.set('page', page.selected + 1);
  router.push(`${pathname}?${params.toString()}`);
};

• 如果分页总条数、总页数是接口异步返回的，一定要给ReactPaginate组件加和当前页码绑定的key属性，因为initialPage仅在组件首次挂载时生效，异步数据返回后组件不会自动更新初始页码，加key可以强制组件在数据就绪后重渲染，保证页码状态正确。
• 不要直接修改路由返回的原始query/searchParams对象，这类状态是只读的，直接修改会触发不可变数据异常。

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