react-paginate
react-paginate copied to clipboard
Hydration issues
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>