React路由器错误-'无法调用方法'getRouteAtDepth'的未定义'

React-router error - 'Cannot call method 'getRouteAtDepth' of undefined'

本文关键字：方法 getRouteAtDepth 未定义 调用 错误 路由器 React      更新时间：2023-09-26

我正在尝试在我的应用程序上实现react路由器。我的主文件包含以下代码：

'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);
  });
}

在我的应用程序组件中，我有以下代码：

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

此代码生成以下错误：

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

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

编辑：显然，我使用的是"React入门套件"，它也在服务器上呈现"应用程序"组件。将react路由器添加到该组件时，会出现此（服务器端）错误。

我的项目不需要服务器端渲染，所以删除它解决了我的问题。等我有时间的时候，我会努力调查为什么会发生这种事。

尝试将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的方式重构它，我希望它能对你有所帮助。

相关文章：