How to construct dynamic query string in ReactJS - reactjs

Question

I have a React app which I want to have this query string /contacts?page=${pageNumber}
where page number have to change when I go to the next page, I use newer version of react-router-dom which doesn't have useHistory hook. Now my URL is only http://localhost:3000/.
I have this code:
const Contact = (props) => {
let array = Object.values(props);
const navigate = useNavigate();
const [pageNumber, setPageNumber] = useState(1);
const [contacts, setContacts] = useState([]);
const [entry, setEntry] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [isSynchronizedClicked, setIsSynchronizedClicked] = useState(false);
const handlePaging = (params) => {
setPageNumber(params + 1);
//navigate(`/contacts?page=${pageNumber}`);
};
useEffect(() => {
setTimeout(() => {
if (searchTerm !== '') {
search();
}
}, 500);
}, [searchTerm, search]);
return (
<>
<div style={{ height: 630, width: '100%' }}>
<DataGrid
id={() => searchTerm === '' ? array.map((contact) => contact.id) : contacts.map((contact) => contact.id)}
rows={searchTerm === '' ? array : contacts}
sx={{
'.MuiDataGrid-columnHeaderTitle': {
fontWeight: 'bold',
},
'.MuiDataGrid-columnHeaders': {
backgroundColor: '#d3d3d3'
},
'.MuiDataGrid-row': {
maxHeight: '51px !important',
minHeight: '51px !important'
},
'.MuiDataGrid-virtualScroller': {
overflow: 'hidden'
}
}}
onPageChange={handlePaging}
columns={columns}
pageSize={10}
rowsPerPageOptions={[10]}
checkboxSelection
onRowDoubleClick={e => navigateToDetails(e)}
onSelectionModelChange={e => setEntry(e)}
/>
</div>
{isSynchronizedClicked && <ClickAwayListener onClickAway={() => setIsSynchronizedClicked(false)}>
<div className='synchronize-popup'>
Do you want to synchronize all contacts ?
<div className='second-message'>This will take a while.</div>
<div className='synchronize-popup-buttons-container'>
<button className='buttons reject' onClick={() => setIsSynchronizedClicked(false)}>No</button>
<button className='buttons approve' onClick={synchronize}>Yes</button>
</div>
</div></ClickAwayListener>}
</>
);
};
And this code in App.js:
function App() {
return (
<BrowserRouter>
<div className="app">
<Routes>
<Route path='/' element={<RenderContacts />} />
<Route path='/details/:id' element={<Details />} />
</Routes>
</div>
</BrowserRouter>
);
}
If someone knows how to do that, I'll be grateful.

Answer 1

This is a common gotcha with React setState.
https://reactjs.org/docs/state-and-lifecycle.html
Read the section:
State Updates May Be Asynchronous
I assume this is the failure: pageNumber likely will not be ready when used.
setPageNumber(params + 1);
navigate(`/contacts?page=${pageNumber}`);
Instead, just use params + 1 inside the navigate function.
After navigation, you will want to use useSearchParams() (assuming router v6?) to get the updated value.