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

I am trying to implement react-router on an my app. My main file contains the following code:

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

}

Inside my App component I have this code:

  • Are JavaScript Map Objects Indexed to Optimize map.get?
  • Why to you have to specify the type of the export (let, var, const…) in ES2015?
  • ECMAScript 6 features available in Node.js 0.12
  • What do function parameter lists inside of curly braces do in es6?
  • Webpack resolve.root and TypeScript loader
  • .map() a Javascript ES6 Map?
  • render() {
        return (
          <div className="App">
            <RouteHandler />
          </div>
        );
      }
    

    This code generates the following error:

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

    If I change <RouteHandler /> to be directly <ContentPage />, the code works.
    Any idea what am I doing wrong?

    EDIT:
    Apparently, I was using “React starter kit”, which renders the “App” component on server as well. When adding react-router to that component, this (server side) error accrued.

    I did not need server side rendering on my project, so removing this solved my problem. I will try to investigate why this happened later when I have time.

  • Array intersection (set-theoretic) with Array.prototype.reduce
  • Why the response object from JavaScript fetch API is a promise?
  • Are variables declared with let or const not hoisted in ES6?
  • Why are local functions not possible in ES6 classes?
  • ES6: Conditional & Dynamic Import Statements
  • React' findNodeHandle method stopped working
  • One Solution collect form web for “React-router error – 'Cannot call method 'getRouteAtDepth' of undefined'”

    Try move your router into App component module something like this:

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

    and appropriate your run module will seems like this:

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

    Just refactor this in your ES6 way, I hope it’ll help you.