page active link working immediately after clicking before redirecting to that page how to solve this

[Sayem-Mahmud]

page active link working immediately after clicking before redirecting to that page how to solve this

here is my component code: import React, { useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; import { controller } from '../../../../../src/state/StateController'; import BigSourceCodeCard from './BigSourceCodeCard/BigSourceCodeCard'; import ReactPaginate from 'react-paginate'; import { ApkData } from '../../../../../interfaces/models'; import Loader from '../../../../helpers/Loader/Loader'; import { useRouter } from 'next/router';

interface Props { apk: Array; }

const LeftLayout: React.FC = ({ apk }) => { const router=useRouter() const states = useSelector(() => controller.states); const [activePage, setActivePage] = useState(1); // const {page}=router.query

const pageCount = Math.ceil(states.totalApk / states.itemsPerPage);

const handlePageClick = (event: any) => { const selectedPage = event.selected + 1; console.log('state',states.currentPage) setActivePage(states.currentPage);

const url = window.location.href;

if (url.includes('search')) {
  window.location.href = `/page/${selectedPage}/search/${states.searchValue}`;
} else if (url.includes('category') && !url.includes('subcat')) {
  window.location.href = `/page/${selectedPage}/category/${states.categoryValue}`;
} else if (url.includes('subcat') && url.includes('category')) {
  window.location.href = `/page/${selectedPage}/category/${states.categoryValue}/subcat/${states.categorySubValue}`;
} else {
  window.location.href = `/page/${selectedPage}`;
}
};

return ( <> {apk ? ( <>

{apk.map(item => { return ( ); })}

      <div className='my-10'>
        <ReactPaginate
          breakLabel='...'
          breakLinkClassName={'pageNumber'}
          pageRangeDisplayed={2}
          marginPagesDisplayed={1}
          renderOnZeroPageCount={null}
          onPageChange={handlePageClick}
          pageCount={pageCount}
          previousLabel={'Prev'}
          nextLabel={'Next'}
          containerClassName={'paginationContainer'}
          pageLinkClassName={'pageNumber'}
          previousLinkClassName={'pageNumber'}
          nextLinkClassName={'pageNumber'}
          activeLinkClassName={'active'}
          disabledLinkClassName={'disable'}
          forcePage={activePage-1} // Remove this line
        />
      </div>
    </>
  ) : (
    <div className='flex justify-center items-start h-[60vh]'>
      <Loader />
    </div>
  )}
</>

); };

export default LeftLayout;