Question

使用RouteHanlder会产生两个错误：

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.

我的申请结构。

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

我的routes.js文件

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

我正确使用RouteHandler吗？我错过了什么？还有其他选择吗？

Answer 1

较新的教程警告：Be Careful About Deprecated Syntax。本文特别提到＆＃34; <RouteHandler />已弃用。＆＃34;

Answer 2

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"?

RouteHandler：React.createElement：type不应为null，undefined，boolean或number

2 个答案: