react-paginate icon indicating copy to clipboard operation
react-paginate copied to clipboard

Hydration issues

Open hirani89 opened this issue 2 years ago • 0 comments

Hi, I am trying to update to the latest version of react-paginate but I am getting hydration issues.

When I remove the paginate component, the page renders without any errors.

The cod below was working fine in v6.5.0

Here is my code.

function handlePageChange(data: any) {
let page = data.selected + 1;
let url = new URL(window.location.href)
  if (url.searchParams.has('page') || page > 1) {
	  url.searchParams.set('page', page)
	  if (window.location.href != url.toString()) {
		  window.location.href = url.toString()
	  }
  }
}
<nav className="section mt-5">
{data.pages > 1 ?
	<ReactPaginate
		previousLabel={'Previous'}
		nextLabel={'Next'}
		pageCount={data.pages}
		marginPagesDisplayed={2}
		pageRangeDisplayed={5}
		onPageChange={handlePageChange}
		containerClassName="pagination"
		breakClassName="page-item"
		breakLabel={<a className="page-link">...</a>}
		pageClassName="page-item"
		previousClassName="page-item"
		nextClassName="page-item"
		pageLinkClassName="page-link"
		previousLinkClassName="page-link"
		nextLinkClassName="page-link"
		activeClassName="active"
		initialPage={currentPage == 0 ? currentPage : currentPage - 1}
	/> : ''}
</nav>

hirani89 avatar May 14 '22 00:05 hirani89