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.

 onEventTriggered(state) {
        if(state.event === 'pathChange'){
            var path = this.context.location.pathname;
            var slug = path.substring(path.lastIndexOf('/post/') + 6);
            if(slug !== this.state.post.slug) {
                fetchData();
            }
        }
    }