Updating react components when the query string changes

Question

I need a component to rerender when another component changes the query/search string.

To change the url I'm using history.push():

private updateURL(date: Date) {
    const url = `/?date=${formatDate(date)}`; // /?date=2019-01-01
    history.replaceState(
        {},
        `Dashboard for ${formatDate(date)}`,
        url
    );
}

In my navigation bar, I want to update my links so they can share the querystring between URLs. This works if I use withRouter:

class Sidebar extends React.Component {
    public render(){
        return <Link to={`/anotherPage?${this.props.location.search}`}>Visit</Link>;
    }
}

export default withRouter(Sidebar);

If I use a Redirect object instead of history.push(), the sidebar updates as it should and that's fine. Does that mean it will unmount the whole view, render the redirect, then remount the whole view? That would be undesirable if that means unmounting and remounting complex svg maps, for example.

constructor(props){
  super(props);
  this.state = {
    redirect: null;
  }
}

private updateURL(date: Date){
  this.setState({
    redirect: `/?date=${formatDate(date)}`
  });
}

public render(){
  if (this.state.redirect){
    return <Redirect to={this.state.redirect} />;
  } else {
    // render dashboard, map, charts, etc.
  }
}

If I cannot or do not want to use <Redirect />, is there an alternative that would cause the sidebar to update when the query string changes due to history.push?

This post might help you stackoverflow.com/questions/48993247/… — Shubham Khatri
– Shubham Khatri, Commented Mar 30, 2019 at 19:56

GProst · Accepted Answer · 2019-03-30 19:40:45Z

1

You can easily check it by placing console.log in componentDidMount for example, but given how React works I believe it will unmount/mount as you suspected. So a better solution would be to use history.replace() API that react-router also provides:

private updateURL(date: Date){
  this.props.history.replace(`/?date=${formatDate(date)}`);
}

answered Mar 30, 2019 at 19:40

GProst

10.3k3 gold badges28 silver badges51 bronze badges

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

2 Comments

whiterook6 Over a year ago

So I would have to wrap whichever component wants to update the URL bar with withRouter(...), right?

GProst Over a year ago

In order to get history object? Yes, or pass it down from parent components. Components which you pass to Route component (like <Route component={MyComponent} />) have history prop by default

Collectives™ on Stack Overflow

Updating react components when the query string changes

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related