title: push a route to change url without reload page
body: <p>I have a react app.</p>
  <p>my routing looks like this =&gt;</p>
  <pre><code>&lt;AppRoute path=&quot;/profile&quot; exact={true} menuTitle=&quot;Profile&quot; component={pages.Profile} /&gt;
  &lt;AppRoute path=&quot;/profile/post_feed&quot; exact={true} menuTitle=&quot;Post Feed&quot; component={pages.PostFeed} /&gt;
  &lt;AppRoute path=&quot;/profile/story_feed&quot; exact={true} menuTitle=&quot;Story Feed&quot; component={pages.StoryFeed} /&gt;
  </code></pre>
  <p>now in profile, there is some filter, so I would like to save them in the URL, to do so, I am using the following.</p>
  <pre><code>  const setQueryParams = (filterId: number | null) =&gt; {
      history.push(`${urlParams.pathname}?filterId=${filterId}`);
    };
  
  
  
    const handleFilterSelectionChange = (id: number) =&gt; {
      setQueryParams(id);
      //....
    };
  </code></pre>
  <p>but this trigger a COMPLETE refresh of the page... and all the query that are associated. I put the following effect in my <code>Profile</code> component ( the one called from the route)</p>
  <pre><code>  useEffect(() =&gt; {
      console.log('FY');
    }, []);
  </code></pre>
  <p>And this trigger at load, then for each filter, the page is fully refreshed. But I would like those thing to trigger once, and when the route don't change (only the query parameters) those effect don7t get retriggered. Is it possible ?</p>