Rendering multiple routes using the same component?
Closed this issue · 2 comments
Happy Thanksgiving! I'm sitting here in a turkey coma trying to figure out how to get a component/page to update and re-render based on a location change / saga. Basically, I have a page for viewing different sports (football, basketball, hockey, etc) called League. It loads the appropriate data by triggering an action in componentWillMount. I don't have a problem when I'm routing to the League component from another page or by direct url, but if I am already looking at a sport (if I'm already viewing the League page), clicking one of the navigation links to switch to another sport changes the location in the url and triggers the router saga 'LOCATION_CHANGE' but it does not trigger the action in componentWillMount -- which I understand, because its already mounted.
I've tried a few things but I feel like I'm over-complicating something that should be pretty simple. Like from your examples, would it be possible to view one blog post and then click a link within that post to have the page reload another post? Any suggestions would be greatly appreciated!
Hey, hope you out of turkey coma :)
Of course it is possible, depending on you project structure you can either use <Link> and componentWillReceiveProps (or any other lifecycle methods) or you can subscribe in saga for location change and update data (make api request) based on that. There is no really one best way, it should depend on specific case.
In my case, to gain full control over urls and how it's updated I have a saga watching url changes and reflecting it in the store. The rest of components that need to be aware of url change are connected to that store, so every time URL changes it updates the store and the store change updates UI