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.