Description

Mercy-1998

opened on Feb 23, 2021

Issue body actions

I want to know, how to maintain pagination according to the user selection?

For example, I have 5 routes like About, Home, Contact, etc.. in each of that routes I'll be listing out more pages using pagination, so here if i select 3rd page of About to view and while i return to Home there also 3rd page will be active without user selection. AS like the current-page, the page-size to view also getting the same, like what size I'm choosing at About to view the same size will be viewing at Home also without the user selection.

Initially while visiting the component it should start from 1st page and as per the user it should change.

I found , that i can use state variable instead of global

How to get rid of this? Can anyone help me out ....

Activity

1. Mercy-1998

   changed the title [-]Pagination and routes — currentpage and cureentpagesize — to be maintained independently[/-] [+]Pagination and routes -- reactjs — currentpage and cureentpagesize — to be maintained independently[/+] on Feb 23, 2021
2. arshhzz commented on Jul 3, 2025

   

   arshhzz

   on Jul 3, 2025

   More actions

   Hey, I faced a similar issue before,
   what's happening is probably because the pagination state (like current page and page size) is shared globally, so it's getting carried over between routes like /about and /home. I used scoping pagination per route using "URLSearchParams" from React Router. This way, each route manages its own page and size values through the URL, and they don’t interfere with each other.

   i used the following hook (custom) :
   <>
   import { useSearchParams } from "react-router-dom";

   export function usePagination(defaultPage = 1, defaultSize = 10) {
   const [searchParams, setSearchParams] = useSearchParams();

   const page = parseInt(searchParams.get("page") || ${defaultPage}, 10);
   const size = parseInt(searchParams.get("size") || ${defaultSize}, 10);

   const setPage = (newPage: number) => {
   searchParams.set("page", newPage.toString());
   setSearchParams(searchParams);
   };

   const setSize = (newSize: number) => {
   searchParams.set("size", newSize.toString());
   searchParams.set("page", "1"); // resets to page 1 when page size changes
   setSearchParams(searchParams);
   };

   return { page, size, setPage, setSize };
   }
   </>

   Then in each route component (/like, /about, /home), call this hook, and the pagination is fully independent for each route. It also remembers the state when navigating back.
   Hope this helps! 👍🏻 .

Issue actions