元素类型无效：期望字符串或类/函数（用于复合组件）但得到：对象答案

【问题标题】：Element type is invalid: expected a stringor a class/function (for composite components) but got: object元素类型无效：期望字符串或类/函数（用于复合组件）但得到：对象
【发布时间】：2018-02-19 15:45:02
【问题描述】：

我是新来的反应和从复数视觉学习相同。我在实现 react-router 时遇到此错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。

这是我的一段代码--

1)main.js

"use strict";
var React = require('react');
var createReactClass = require('create-react-class');
var ReactDOM = require('react-dom');
var Router = require('react-router'); 
var routes = require('./routes');
ReactDOM.render(<Router routes={routes}></Router>,document.getElementById('app'))

2)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')}>
            <DefaultRoute handler={require('./components/homePage')} />
            <Route name="authors" handler={require('./components/authors/authorPage')}/>
            <Route name="about" handler={require('./components/about/aboutPage')}/>
        </Route>
    );

module.exports = routes;

3)app.js

var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require('create-react-class');
var Header = require('./common/header');
var RouteHandler = require('react-router').RouteHandler;

var App = createReactClass({
    render:function(){
        return (
            <div>
                <Header/>
                <RouteHandler/> 
            </div>
        );
    }
});

module.exports = App;

版本 -- "react-router": "^4.2.0"

【问题讨论】：

您的main.js 文件似乎只呈现一个空路由器（不使用路由）。此外，您的 routes.js 似乎正在使用 v2+ API，而您正在使用的 v4+ API 发生了重大变化。您可能还想升级到 ES6，因为它在处理单个文件/模块时会更轻松。

标签： reactjs react-router-v4

【解决方案1】：

从 react-router v1.0 开始，DefaultRoute 已经消失。而是引入了 IndexRoute。而且由于 v4 IndexRoute 也消失了?。所以我猜你正在使用 v4 React 路由器，但语法来自 0.1x 版本。您应该使用旧版本的路由器或更新的语法。

【讨论】：