【问题标题】:Webpack-dev-server, redux, isomorphic react router invariant errorWebpack-dev-server,redux,同构反应路由器不变错误
【发布时间】:2015-09-01 18:40:20
【问题描述】:

当通过 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

【问题讨论】:

    标签: javascript reactjs react-router react-jsx redux


    【解决方案1】:

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

    【讨论】:

    • 我将此设置为可接受的答案,因为它引导我找到了正确的解决方案。谢谢!实际的解决方案是我导入和发送的历史记录不正确。我需要从react-router/lib/BrowserHistory 中获取BrowserHistory(根据我给你的信息你不会知道的!)
    猜你喜欢
    • 2016-08-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-14
    • 2017-02-24
    • 2021-03-01
    相关资源
    最近更新 更多