Pagination and routes -- reactjs — currentpage and cureentpagesize — to be maintained independently

[Mercy-1998]

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 ....

[arshhzz]

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! 👍🏻 .