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?

user_5328683 · Answer

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

user_4348986 · Answer

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.

react-router 4 does not update url with query parameters

2 Answers