Webpack-dev-server, redux, isomorphic react router invariant error

Question

When running my server through webpack dev server, I get this error:

Uncaught Error: Invariant Violation: Server-side <Router>s need location,
branch, params, and components props. Try using Router.run to get all the 
props you need

My client entry file looks like this:

// ... imports ... 
let initialState = window.__INITIAL_STATE__;

Object.keys(initialState)
      .forEach(key => {
        initialState[key] = fromJS(initialState[key]);
      });
const reducer = combineReducers(reducers);
const store   = createStore(reducer, initialState);
React.render(
  <Provider store={store}>
    {() =>
      <Router children={routes} history={history} />
    }
  </Provider>,
  document.getElementById('react-view')
);

Everything renders on the server-side correctly, the problem is when I have this router code on the client side. It seems like the router is trying to act like a server-size router even though it's being run on the client.

The versions I am using are:

├── react@0.13.3
├── react-hot-loader@1.3.0
├── react-redux@0.8.2
├── react-router@1.0.0-beta3
├── redux@1.0.1
└── webpack-dev-server@1.10.1

Answer 1

You still need to call Router.run on the client side to handle the navigation after the server delivers the first page. It will use Router.HistoryLocation and still execute a React.render method for the matched route. Try calling React.render inside of the Router.run instead of the other way around.