React-Redux Issue with StaticRouter, serverside rendering and state.routing #567

New Issue

fergalmoran · 2025-08-09T17:16:47Z

fergalmoran commented

2025-08-09 17:16:47 +00:00

Originally created by @DanHarman on 7/19/2017

Hi,

Issue
When serverside rendering, the store.routing.location is null. This is because serverside is using a StaticRouter rather than a ConnectedRouter so there is nothing ensuring the correct actions are pushed to keep the store in sync.

Result
Serverside rendering any component relying on the location being in the store will find a null object there. This will either cause a null reference exception, or if that is dealt with, a re-render on the client as it will have to handle re-rendering affected components.

Remediation
There are a few ways to do this:

Use connected router on the server. Quick and easy but maybe more expensive than static router?
Manually dispatch the location change so that the routeReducer can fixup the store.
Manually pass the Location into the initial version of the ApplicationState (most efficient), but a bit more coupled to the implementation.

I appreciate maybe this is an edge case, so not sure if you want to address it in the template. Its worth noting that ApplicationState doesn't expose the RouterState unless one adds it in, so I guess most people won't be using this. Then again whats the point of wiring it in, if its not be used!

It's also worth noting that react-router-redux has a bug at the moment where the back button is one step behind for all non-trivial apps without taking extra measures. It doesn't affect the template, but it got me on my more complex app. https://github.com/ReactTraining/react-router/issues/5072

*Originally created by @DanHarman on 7/19/2017* Hi, **Issue** When serverside rendering, the `store.routing.location` is null. This is because serverside is using a `StaticRouter` rather than a `ConnectedRouter` so there is nothing ensuring the correct actions are pushed to keep the store in sync. **Result** Serverside rendering any component relying on the location being in the store will find a null object there. This will either cause a null reference exception, or if that is dealt with, a re-render on the client as it will have to handle re-rendering affected components. **Remediation** There are a few ways to do this: 1. Use connected router on the server. Quick and easy but maybe more expensive than static router? 2. Manually dispatch the location change so that the routeReducer can fixup the store. 3. Manually pass the Location into the initial version of the ApplicationState (most efficient), but a bit more coupled to the implementation. I appreciate maybe this is an edge case, so not sure if you want to address it in the template. Its worth noting that ApplicationState doesn't expose the RouterState unless one adds it in, so I guess most people won't be using this. Then again whats the point of wiring it in, if its not be used! It's also worth noting that react-router-redux has a bug at the moment where the back button is one step behind for all non-trivial apps without taking extra measures. It doesn't affect the template, but it got me on my more complex app. https://github.com/ReactTraining/react-router/issues/5072

fergalmoran closed this issue

2025-08-09 17:16:47 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#567