React.createElement: Typ ist ungültig - erwartet eine Zeichenkette (für eingebaute Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten) aber: undefined

Question

Ich habe ein einfaches Routing-Programm, das den Fehler wie in Titel erwähnt gibt. Unten ist mein Code. Hilf mir, wo ich falsch gelaufen bin. Dank im Voraus

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') 
); 

es druckt Hallo (von app.js)

Answer 1

Versuchen Sie, fügen Sie diese in Ihrer Hauptdatei

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

Ihre App kompon Nent hat keine Kinder, es ist also nicht nötig, sie zu rendern. Es lässt dich im Grunde versuchen, undefined zu rendern. Also im Grunde entfernen Sie diese Zeile:

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