React Router "Link to" does not load new data when called from inside the same component

Question

Background

I am building an app with the following details

• react
• react-router
• redux
• it is universal javascript
• node js

Problem

When routing with the Link tag from component to component it works perfectly. It calls the data that the component requires and renders the page. But when I click on a Link that uses the same component as the current one all I see is the url change.

Attempts

Things I have tried to get this to work.

Attempt 1

So far I have tried the steps in this question but the solution wont work for me. This was the code I implemented

componentWillReceiveProps(nextProps) {
    if (nextProps.article.get('id') !== this.props.article.get('id')) {
        console.log('i got trigggerd YESSSSSSSSSSSSSSS');
    }
}

But the variable nextProps is always the same as the current props.

Attempt 2

I decided to call the same code I use in componentWillMount but that didn't work either.

componentWillMount() {
    let { category, slug } = this.props.params;
    this.props.loadArticleState({ category, slug });
} 

It just creates an infinite loop when I put this into componentWillReceiveProps.

Conclusion

I belief the problem is clicking the link never calls the data associated with it. Since the data is loaded with

static fetchData({ store, params }) {
    let { category, slug } = params;
    return store.dispatch(loadArticleState({ category, slug }));
}

Any help is appreciated.

Answer 1

Solution I Used

I created a function to test if the previous data is the same as the changed data.

compareParams(prevProps, props) {
    if (!prevProps || typeof prevProps.params !== typeof props.params) {
        return false;
    }
    return Object.is(props.params, prevProps.params);
}

So this tests

• are there any previous props?
• and then if the props are equal to the previous props?
• then return false if there are if this is the case
• if not then we see compare props and previous props parameters

In ComponentDidUpdate

In the compoonentDidUpdate we use this function to determine if the data should be updated

componentDidUpdate(prevProps) {
    if (this.compareParams(prevProps, this.props)) {
        return;
    }
    this.props[this.constructor.reducerName](this.props.params);
}

Conclusion

This code updates the body of a page that uses the same react component if it receives new data.