react-router 1.0：使用 this.props.children 而不是 RouteHandler

Question

我正在尝试从 react-router 0.13 升级到 1.0。我通读了指南并相信我已正确设置所有内容，但我不断收到此错误：

Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined

错误对应react-router中的这个函数：

    function createRoutesFromReactChildren(children, parentRoute) {
  var routes = [];

  _react2['default'].Children.forEach(children, function (element) {
    if (_react2['default'].isValidElement(element)) {
      // Component classes may have a static create* method.
      if (element.type.createRouteFromReactElement) {
        var route = element.type.createRouteFromReactElement(element, parentRoute);

        if (route) routes.push(route);
      } else {
        routes.push(createRouteFromReactElement(element));
      }
    }
  });

  return routes;
}

大概这意味着路由没有正确地作为 this.props.children 传递？

如果有帮助，这是我的路线：

var routes = (
  <Route path="/" component={AppView}>
    <Route path="account" component={Account} />
    <Route path="insights" component={InsightsHome} />
    <Route path="insights/:slug" component={SingleInsight} />

    <Route path="collections" component={CollectionBox}>
      <Route path="/:id" component={CollectionContent} />
      <DefaultRoute component={NoCollections} />
    </Route>

    <Route path="team" component={Team} />

    <Redirect from="projects/:projectId/insights/?" to="insights" />
    <Redirect from="projects/:projectId/insights/:slug/?" to="insights-single" />
    <Redirect from="*" to="insights" />
  </Route>
);

这是我的 render 方法（我使用的是 Redux）：

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>{routes}</Router>
  </Provider>,
  document.getElementById('site-container')
);

这是我的 AppView 组件的相关部分：

return (
      <div>
        {this.props.children}
      </div>
    )
  },

Answer 1

您的问题可能源于 DefaultRoute 被替换为 IndexRoute

https://github.com/rackt/react-router/blob/master/CHANGES.md#linking-to-index-routes

react-router 1.0：使用 this.props.children 而不是 RouteHandler

react-router 1.0: using this.props.children instead of the RouteHandler

javascript

reactjs

react-router

redux