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

Question

当运行通过 webpack 开发服务器连接我的服务器时，我得到这个错误：

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

我的客户端入口文件如下所示：

// ... 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')
);

一切都在服务器端正确呈现，问题是当我在客户端有这个路由器代码时。看起来路由器试图像服务器大小的路由器一样工作，即使它在客户端上是运行。

我使用的版本是：

├── 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

服务端发送第一页后，还需要在客户端调用Router.run处理导航。它将使用 Router.HistoryLocation 并仍然为匹配的路由执行 React.render 方法。尝试在 Router.run 内部调用 React.render，而不是相反。

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

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

javascript

reactjs

react-jsx

react-router

redux