React.createElement：型が無効です - 文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）がありますが、取得済み：未定義

Question

タイトルにエラーを示す簡単なルーティングプログラムがあります。以下は私のコードです。間違ったところで私を助けてください。事前のおかげ

App.js

import React from 'react'; 

class App extends React.Component { 
    render() { 
     return (
      <div> 
       <h2>hello</h2> 
       {this.props.children} 
      </div> 
     ); 
    } 
} 

export default App; 

home.js

import React from 'react'; 

export default class Home extends React.Component { 
    render() { 
     return (
      <h1>Hello World!</h1> 
     ) 
    } 
} 

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter as Router, Route, IndexRoute } from 'react-router-dom'; 

import Home from './components/home'; 
import App from './app'; 

ReactDOM.render(
    <Router> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home} /> 
     </Route> 
    </Router>, 
    document.getElementById('app') 
); 

が

Answer 1

はあなたのメインのファイル

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter as Router, Route, IndexRoute } from 'react-router-dom'; 

import Home from './components/home'; 
import App from './app'; 

ReactDOM.render(
    <Router> 
     <div> 
      <App /> 
      <Route exact path="/" component={Home} /> 
     </div> 
    </Router>, 
    document.getElementById('app') 
); 

Answer 2

（app.jsから）ハロー印刷されています

Appコンポネントには子供がいないので、それらを試してレンダリングする必要はありません。基本的にはundefinedをレンダリングしようとします。だから、基本的にはその行を削除します。

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