反应路由器错误 - '无法调用未定义的方法'getRouteAtDepth'答案

【问题标题】：React-router error - 'Cannot call method 'getRouteAtDepth' of undefined'反应路由器错误 - '无法调用未定义的方法'getRouteAtDepth'
【发布时间】：2015-06-09 06:17:09
【问题描述】：

我正在尝试在我的应用上实现 react-router。我的主文件包含以下代码：

'use strict';

import 'babel/polyfill';
import React from 'react/addons';
import App from './components/App';
import ContentPage from './components/ContentPage';
import Dispatcher from './core/Dispatcher';
import AppActions from './actions/AppActions';
import Router from 'react-router';

var { Route, RouteHandler, Link } = Router;

function run() {

  var routes = (
    <Route name="app" path="/" handler={App}>
      <Route handler={ContentPage}/>
    </Route>
  );

  Router.run(routes, function (Handler) {
    React.render(<Handler/>, document.body);
  });

}

在我的 App 组件中，我有以下代码：

render() {
    return (
      <div className="App">
        <RouteHandler />
      </div>
    );
  }

此代码生成以下错误：

TypeError: Cannot call method 'getRouteAtDepth' of undefined
   at RouteHandler.createChildRouteHandler

如果我将 <RouteHandler /> 直接更改为 <ContentPage />，则代码有效。知道我做错了什么吗？

编辑：显然，我使用的是“React starter kit”，它也在服务器上呈现“App”组件。将 react-router 添加到该组件时，会产生此（服务器端）错误。

我的项目不需要服务器端渲染，因此删除它解决了我的问题。当我有时间时，我会尝试调查为什么会发生这种情况。

【问题讨论】：

你使用的是什么版本的 React？
反应版本：“0.13.0”，反应路由器：“0.13.2”
这个怎么样：github.com/rackt/react-router/issues/720
谢谢，不过好像 react 只加载了一个，所以可能不是问题...
@YanivEfraim，我得到了完全相同的错误。我尝试用 require('react/addons') 替换 react-router 中的所有 require('react') 引用 - 但它仍然给了我同样的错误。最后，结果是我的 gulp 文件有问题！我使用的是browserify(..).externals(libs)，而'libs'数组有'react'而不是'react/router'。

标签： javascript reactjs ecmascript-6 react-router

【解决方案1】：

尝试将您的 router 移动到 App 组件模块中，如下所示：

var React = require('react'),
    Router = require('react-router'),
    Route = Router.Route,
    RouteHandler = Router.RouteHandler,
    ContentPage = require('./components/ContentPage'),
    App, routes;

App = React.createClass({
    render: function(){
         return (
              <div className="App">
                  <RouteHandler />
              </div>
         );
    }
});

routes = (
    <Route name="app" path="/" handler={App}>
        <Route handler={ContentPage}/>
    </Route>
);

module.exports = {
    run: function () {
        Router.run(routes, function (Handler) {
            React.render(<Handler/>, document.body)
        });
    }
};

你的run模块看起来像这样：

 var AppRunner = require('./component/App');
 AppRunner.run();

只需用你的 ES6 方式重构它，我希望它会帮助你。

【讨论】：