react-router 4 does not update url with query parameters

Question

I use higher level filter component to add query parameters to URL so that the users could share links with different types of filter.

I am exporting component withRouter() and everything seems legit - I get history injected into component props. However when I call this piece of code:

this.props.history.push({
        pathname: this.props.history.location.pathname,
        query: { tags: selectedTags }
    });

it does change the state of this.props.history and I can see my query present but the URL in browser does not change. Am I doing something wrong?

Quoc-Anh Nguyen · Accepted Answer · 2017-09-29 09:50:19Z

4

You are using it wrong, your code should be:

this.props.history.push({
        pathname: this.props.history.location.pathname,
        search: `?tags=${ selectedTags }`
    });

You can read more about navigation: https://github.com/ReactTraining/history#navigation

answered Sep 29, 2017 at 9:50

Quoc-Anh Nguyen

5,0961 gold badge25 silver badges34 bronze badges

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

4 Comments

Xeperis Over a year ago

Ah, thanks. But why does this display the previous state? If I push search: ?tags=${ selectedTags }` it on performing an action it will not show up the first time. If I add another query params say search: ?cars=${ selectedTags }` and push that on action the url will now display only ?tags. Seems like there is one state lag.

Quoc-Anh Nguyen Over a year ago

What value does selectedTags have?

Xeperis Over a year ago

I figured out the problem: two redux actions were fired at the same time one of which is Location change for react-router so I went and fixed that. This brings me to the next problem which is vaguely discussed on the internet: changing search string without triggering route change. The reason behind this is to build up a sharable link for a sort of data mining WEB APP where making lot of calls is expensive and unresponsive in terms of UX.

Quoc-Anh Nguyen Over a year ago

You can just when object with only property search or use native HTML5 Push State

movier · Accepted Answer · 2017-09-29 09:43:20Z

0

I have encountered the same situation. My solution is to use pushState() method of browser's History API which can change the URL in browser. In terms of changing page content I use React's setState() method.

answered Sep 29, 2017 at 9:43

movier

13 bronze badges

Collectives™ on Stack Overflow

react-router 4 does not update url with query parameters

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related