CODEWITHSUNDEEP
reactjsreact-router
ironmike
ironmike

Reputation: 143

React Router not updating content on url change

I have tried a couple of solutions I found on StackOverflow but as of yet nothing has worked. When I navigate to a designer from the 'our designers' dropdown in the navigation it works for the first time. If I open the nav and again try a different designer, the url changes but nothing else happens. I'm using React Router v4.

This is how i'm initially getting the content:

 updateDesigner() {
  Data.map((designer, id) => {
    if (`?${designer.title.toLowerCase().split(' ').join('')}` === 
      this.props.location.search){
         this.setState({
            title: designer.title,
            blurb: designer.blurb,
            sale: designer.sale,
            dresses: designer.dresses
          });
        }
        return false;
 });
}

componentWillMount() {
 this.updateDesigner();
}

In the Navigation component I have this function for when a designer is clicked:

 handleDesignerClick(d) {
    const title = d.title.toLowerCase().split(' ').join('');
    this.props.history.replace({
        pathname: '/designer',
        search: title
});

The site is very much a work in progress but i've uploaded it Here if you need to dig deeper.

Any help would be greatly appreciated.

Upvotes: 1

Views: 780

Answers (1)

Arman Charan
Arman Charan

Reputation: 5797

componentDidUpdate() can be leveraged to compare current and previous query strings in order to detect changes in location for instances where components are not dismounted.

// Did Update.
componentDidUpdate(previousProps) {
  const currentSearch = this.props.location.search
  const previousSearch = previousProps.location.search
  if (currentSearch !== previousSearch) updateDesigner()
}

Upvotes: 4

Related Questions