0

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;
  }
`;

0 Answers0