push a route to change url without reload page

user_3241192 0
Viewed 2812

I have a react app.

my routing looks like this =>

<AppRoute path="/profile" exact={true} menuTitle="Profile" component={pages.Profile} />
<AppRoute path="/profile/post_feed" exact={true} menuTitle="Post Feed" component={pages.PostFeed} />
<AppRoute path="/profile/story_feed" exact={true} menuTitle="Story Feed" component={pages.StoryFeed} />

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.

  const setQueryParams = (filterId: number | null) => {
    history.push(`${urlParams.pathname}?filterId=${filterId}`);
  };



  const handleFilterSelectionChange = (id: number) => {
    setQueryParams(id);
    //....
  };

but this trigger a COMPLETE refresh of the page... and all the query that are associated. I put the following effect in my Profile component ( the one called from the route)

  useEffect(() => {
    console.log('FY');
  }, []);

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 ?

react-router reactjs
1 Answers

Try to use replace instead push

    const setQueryParams = (filterId: number | null) => {

        history.replace({ search: `?filterId=${filterId}` })// CHANGE HERE
    };



  const handleFilterSelectionChange = (id: number) => {
      setQueryParams(id);
    //....
  };
user_111661600
Related