如何在react-paginate中通过URL参数设置选中页面？

• 先处理参数类型和索引转换：searchParams.get("page")拿到的是字符串，必须转成数字，而且react-paginate的forcePage是从0开始计数的（比如URL里的page=3对应索引2），所以得做个减1处理：

  const pageFromUrl = searchParams.get("page");
  const targetPageIndex = pageFromUrl ? Number(pageFromUrl) - 1 : 0;
  

• 确保forcePage传对值：把转换后的targetPageIndex传给react-paginate的forcePage属性，同时要保证这个索引不超过总页数减1（比如总页数是5的话，最大索引是4），不然组件会自动修正到合法范围。
• 同步状态与URL参数：如果用useState管理页码，要在组件初始化时把URL参数转成的索引设为初始状态，还可以监听URL变化同步更新：

  const [currentIndex, setCurrentIndex] = useState(targetPageIndex);
  
  useEffect(() => {
    const newPage = searchParams.get("page");
    if (newPage) {
      setCurrentIndex(Number(newPage) - 1);
    }
  }, [searchParams]);
  
  // 渲染分页组件
  <ReactPaginate
    forcePage={currentIndex}
    onPageChange={(selected) => setCurrentIndex(selected.selected)}
    pageCount={总页数} // 这里要替换成实际的总页数计算值
    // 其他样式、显示相关属性
  />
  

• 排查属性冲突：如果同时用了initialPage和forcePage，forcePage会覆盖前者，但要保证forcePage的变化能触发组件重渲染。另外，总页数pageCount必须正确，要是总页数比目标索引还小，forcePage也不会生效。

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