I am building an app with the following details
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.
Things I have tried to get this to work.
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.
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.
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.
Sandeep Panda
co-founder, Hashnode
As the new URL also uses the same component, it doesn't reload the data and re-render it. The solution is simple. You could trigger an event when your URL changes and listen to that event in your component. In case the
slugis different from the current one you need to call yourfetchDatafunction and do asetState()so that the component re-renders itself.For example, you can do a simple check as following in your component :
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(); } } }Let me know if you have any questions!