Nextjs pagination getting error on pathname

July 14, 2022

using react-paginate package trying to access pathname its showing error Below my code like

const pagginationHandler = (page) => { 
        const currentPath = location.pathname;
        const currentQuery = location.search;
        currentQuery.page = page.selected + 1;
        user.router.push({
            pathname: currentPath,
            query: currentQuery,
        });



<ReactPaginate
                    previousLabel={'previous'}
                    nextLabel={'next'}
                    breakLabel={'...'}
                    breakClassName={'break-me'}
                    activeClassName={'active'}
                    containerClassName={'pagination'}
                    subContainerClassName={'pages pagination'}
    
                    initialPage={user.totalcount.currentPage - 1}
                    pageCount={user.totalcount.pageCount}
                     marginPagesDisplayed={2}
                    pageRangeDisplayed={5}
                    onPageChange={pagginationHandler}
                />

passing All required Value to ReactPaginate and Now getting error from pagginationHandler
TypeError: Cannot create property ‘page’ on string ‘?page=1’
image error screen https://media.todaysprint.com/i/khdJfMW8.png

>Solution :

In nextjs, you should use useRouter to get query params

import { useRouter } from 'next/router';

const router = useRouter();
const pagginationHandler = (page) => { 
    const currentPath = router.pathname;
    const currentQuery = { ...router.query };
    currentQuery.page = page.selected + 1;
    router.push({
        pathname: currentPath,
        query: currentQuery,
    });
}