要素タイプが無効です：文字列またはクラス/関数（コンポジットコンポーネント用）が必要ですがオブジェクト：

Question

リアルーターを実装しているときにこのエラーが発生しました：

要素タイプが無効です：文字列（組み込みコンポーネント用）またはクラス/関数（複合コンポーネント用）、got：オブジェクトが必要です。

1）

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

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 routes.js main.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"

Answer 1

DefaultRouteはリアクションルータv1.0で廃止されました。代わりにIndexRouteが導入されています。そして、v4 IndexRouteもなくなってしまったからです。だからあなたはv4 Reactルータを使用していると思いますが、構文はバージョン0.1xからです。古いバージョンのルータまたは新しい構文を使用する必要があります。