Why history push(query params) reloads the page? React

Question

Problem: When I try to update url by adding query params, page reloads.

.tsx

useEffect(() => {
  requestResources()
  requestPosts({})
}, [])

const handleSlideItemClick = (value: string) => {
  history.push(`?resource=${value}`)
}

return (
  Box py={16} px='8px'>
    <SmoothSlider
      list={resources.list}
      name='resource'
      onSelect={handleSlideItemClick}
    />
  </Box>
)

Expectation: just update url by adding query params without page reload

I have also tried by <Link to={?resource=&{someValue}}>, result is same.

When you say the page reload, do you mean the component remounts? And is your idea only to add new queryparams to url — Shubham Khatri, May 21 '20 at 04:30
Can you create a reproducible demo of your application because it does work as you expect — Shubham Khatri, May 21 '20 at 04:45

score 2 · Accepted Answer · answered May 21 '20 at 04:55

You can use pushState to achieve this functionality. It will not reload URL when you update the query URL.

You can implement like this:

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?resource=newValue';

history.pushState({path:newurl},'',newurl);

Where newurl is your updated URL.

Source

score 0 · Answer 2 · answered May 21 '20 at 05:26

0

You should try to use <Link /> and set the property to as a function.

<Link to={location => ({ ...location, search: `?resource=${value}` })} />

answered May 21 '20 at 05:26

Kirill Skomarovskiy

1,535
1
7
9

score 0 · Answer 3 · answered May 21 '20 at 06:03

Try this code snippet. After the button press, the 'value' is maintained in React state and passed correctly to URL and React code is not reloaded.

import  React, {useState}  from 'react';

// https://stackoverflow.com/questions/61927235/why-history-pushquery-params-reloads-the-page-react
export default function App(props) {


    const [value, setValue] = useState(0)

    function handleSlideItemClick(target) {
        setValue( value + 1);
        // eslint-disable-next-line no-restricted-globals
        history.pushState ({ }, 'Page Title', `?resource=${value}`)
    }
    // I am using  button for simplicity 
    return <button type="button" onClick={handleSlideItemClick}>Click Me!</button>

}

Why history push(query params) reloads the page? React

3 Answers3