push a route to change url without reload page

Question

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 ?

You could either use shouldComponentUpdate or push to the window history directly. I have an application similar to google maps where I update the URL frequently, and I use the window history directly for updates that I know I do not want re-renders. — Wolfie
– Wolfie, Commented Dec 1, 2020 at 2:19

Adriano Machado · Accepted Answer · 2020-12-01 03:05:31Z

3

Try to use replace instead push

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

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



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

edited Dec 1, 2020 at 3:05

answered Dec 1, 2020 at 2:31

Adriano Machado

17010 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Crocsx Over a year ago

it does the same that push T.T

Adriano Machado Over a year ago

Sorry I forgot a relevant detail, check it now

Crocsx Over a year ago

it does still reload the page. there must be something in my code then. this solution works to you ?

Crocsx Over a year ago

it's really annoying to debug ahah, just removing history.replace({ search: urlParams.search }); do the trick, but idk why it reload my route if I put it back.

Adriano Machado Over a year ago

If possible, provide more detail, like where ”history” came from

|

Collectives™ on Stack Overflow

push a route to change url without reload page

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related