react-router-server
react-router-server copied to clipboard
fetchState not working if component uses contextTypes
I tried using react-router-server
in a project that uses react-intl
. In some components I need to use the intl context that is provided by react-intl
but if I declare contextTypes for that component fetchState doesn't work.
I added console.log statements to the callback of my data fetch method and the callback of renderToString and it seems like the component just ignores that it should fetch data and renders immediately.
Ok I've now tried a few things and I found a few strange behaviours and a workaround for my problem.
The problem with fetchState not working is fixed by adding reactRouterServerAsyncRenderer
to the contextTypes. But after I did that this.context.intl
which comes from react-intl
and was declared in my contextTypes was undefined.
I'm not sure how/why that happens as I don't completely understand the context api. But eventually I found a solution for this. I moved all of the markup (and with that the use of the intl context) that was happening in my component down to a child component. With that I could remove all contextTypes on the component that fetches the data and the intl context works normally on the child component.
I'm not sure if this behaviour can be improved in react-router-server
but I think it should be at least mentioned somewhere in the documentation.