Isomorphic render of protected route with "redirectAction: routerActions.replace" fails

[newbreedofgeek]

Hi Guys,

This may be related to the issue #34 (or maybe not)

I have specified a protected route (that uses UserIsAuthenticated)
https://github.com/newbreedofgeek/react-redux-material-starter/blob/master/common/js/routes/stations.js

i.e. my "/stations" route is protected like so:
UserIsAuthenticated(StationsContainer)

My UserIsAuthenticated uses react-router's routerAction.replace to redirect to "/login" if a "user" state object is not present in redux state. (the "user" state object gets created after a successful login and is stored in local storage for persistence)
redirectAction: routerActions.replace

Everything works as intended on the Client React side, but when I refresh my "/stations" in the browser and the server is trying to render it, I get this error:

TypeError: Cannot read property 'replace' of undefined
   at /Users/markpaul/Source/Software/react-redux-material-starter/node_modules/react-router-redux/lib/middleware.js:29:16
   at /Users/markpaul/Source/Software/react-redux-material-starter/node_modules/redux-thunk/lib/index.js:14:16
   at redirect (/Users/markpaul/Source/Software/react-redux-material-starter/node_modules/redux-auth-wrapper/lib/index.js:111:20)
   at createRedirect (/Users/markpaul/Source/Software/react-redux-material-starter/node_modules/redux-auth-wrapper/lib/index.js:90:5)
   at UserAuthWrapper.componentWillMount (/Users/markpaul/Source/Software/react-redux-material-starter/node_modules/redux-auth-wrapper/lib/index.js:158:13)
   at /Users/markpaul/Source/Software/react-redux-material-starter/node_modules/react/lib/ReactCompositeComponent.js:347:23
   at measureLifeCyclePerf (/Users/markpaul/Source/Software/react-redux-material-starter/node_modules/react/lib/ReactCompositeComponent.js:74:12)
   at ReactCompositeComponentWrapper.performInitialMount (/Users/markpaul/Source/Software/react-redux-material-starter/node_modules/react/lib/ReactCompositeComponent.js:346:9)
   at ReactCompositeComponentWrapper.mountComponent (/Users/markpaul/Source/Software/react-redux-material-starter/node_modules/react/lib/ReactCompositeComponent.js:257:21)
   at Object.mountComponent (/Users/markpaul/Source/Software/react-redux-material-starter/node_modules/react/lib/ReactReconciler.js:47:35)

I know this is probably because when 'UserIsAuthenticated(StationsContainer)' is executed by the server it encounters the routerActions.replace line and as routerActions is probably undefined in the server, it breaks.

Any help on how I may be able to fix this?? I've tried a few things but have had no luck so far.

FYI: here are my React Client and Server files.
My React "client" file specifies the client side react code and route setup:
https://github.com/newbreedofgeek/react-redux-material-starter/blob/master/client/index.js

and my "server" file specifies the isomorphic handling of the component to render:
https://github.com/newbreedofgeek/react-redux-material-starter/blob/master/server/server.js

Any help will be greatly appreciated...

[mjrussell]

The issue is that you haven't configured your store properly with history for server side rendering. The stack trace you posted fails at this line, with the history being null/undefined are therefore it can't find the method replace on it.

You are using browser history in your store configuration here:

const routingMiddleware = routerMiddleware(browserHistory);

But if you look at the example of setting up the server for SSR in the react-router-redux example app, you need to use a memory history instead of a browser history (because there is no browser yet!) on the server. So the configureStore will need to take in the history to use as an argument instead of importing the browser history from React Router.

[mjrussell]

@newbreedofgeek did this work for you?

[newbreedofgeek]

@mjrussell thanks very much for your prompt and clear support.

I fixed it as per your recommendation. SSR works perfectly now with redux-auth-wrapper protected routes!

For reference to anyone else your may have a similar issue, here is my change log:
newbreedofgeek/react-redux-material-starter@76c49ff