When i click, for exemple, on back button of the navigator, the current page is not highlighted on navigation bar
The goTo function is a route to navigate for another page on pagination, its works good, but when i try to navigate whit browzer back button, the page is reinderized, but the current page not highlighted on navigation bar
JavaScript Code
export default function Pagination({ count, globaLimit, pageIndex, goTo }) {
const navigate = useNavigate();
const [currentPage, setCurrentPage] = useState(pageIndex);
useEffect(() => {
setCurrentPage(pageIndex);
}, [pageIndex]);
const onPageChange = (selectedPage) => {
goTo(navigate, selectedPage.selected);
};
return (
<PaginationContainer
key={currentPage}
currentPage={currentPage}
previousLabel={"Previous"}
nextLabel={"Next"}
breakLabel={"..."}
pageCount={Math.trunc(count / globaLimit) + 1}
onPageChange={onPageChange}
activeClassName={"item active"}
breakClassName={"item break-me"}
containerClassName={"pagination"}
disabledClassName={"disabled-page"}
marginPagesDisplayed={2}
nextClassName={"item next"}
pageClassName={"item pagination-page"}
pageRangeDisplayed={2}
previousClassName={"item previous"}
/>
);
}
Styled components
export const PaginationContainer = styled(Pagination)`
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
height: fit-content;
border: 1px solid black;
color: black;
.item {
align-items: center;
cursor: pointer;
display: flex;
font-size: 20px;
height: 30px;
justify-content: center;
width: 40px;
}
.disabled-page {
color: #808e9b;
}
.active {
border: solid 1px #808e9b;
color: #808e9b;
}
.next {
font-size: 20px;
height: 30px;
width: 100px;
border-left: 1px solid black;
}
.pagination {
background-color: #0fbcf9;
display: flex;
}
.previous {
font-size: 20px;
height: 30px;
width: 100px;
border-right: 1px solid black;
}
`;