RouteHandler: React.createElement: type should not be null, undefined, boolean, or number

Question

The use of RouteHanlder gives two errors:

VM2805 bundle.js:9597Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

The structure of my application.

src
-- components
-- -- App.jsx
-- -- LengthModule.jsx
-- index.jsx
-- routes.js

My routes.js file

var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;
var routes = (
    <Route name="app" path="/" handler={require('./components/app.jsx')}>
        <DefaultRoute handler={require('./components/LengthModule.jsx')} />
    </Route>
)

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';    
ReactDOM.render(<div><App /></div>, document.getElementById('app'));

App.jsx

import React from 'react';
import { Router, RouteHandler } from 'react-router';

export class App extends React.Component {
    render () {
        return <div>
            <RouteHandler />            
        </div>;
    }
}

LengthModule.jsx

import React from 'react';
import Router from 'react-router';

export class LengthModule extends React.Component {        
    render () {
        return <div>"Hello World"</div>;
    }
}

Am I using RouteHandler correctly? What am I missing? Are there any alternatives?

Answer 1

App.jsx

import React from 'react';
import { Router, RouteHandler } from 'react-router';

export default class App extends React.Component {
   render () {
    return <div>
      <RouteHandler />            
    </div>;
   }
}

LengthModule.jsx

import React from 'react';
import Router from 'react-router';

export defaulf class LengthModule extends React.Component {        
   render () {
    return <div>"Hello World"</div>;
  }
}

Why es6 react component works only with "export default"?

Answer 2

Newer tutorials warn: Be Careful About Deprecated Syntax. This article specifically mentions "<RouteHandler /> is Deprecated."