React.createElement：類型無效 - 預期是字符串（對於內置組件）或類/函數（對於復合組件）但得到：未定義

Question

我有一個簡單的路由程序，給出了標題中提到的錯誤。 下面是我的代碼。

應用程序.js

import React from 'react';

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

export default App;

主頁.js

import React from 'react';

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

主文件

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

它正在打印你好（來自 app.js）

Answer 1

您的App組件沒有子組件，因此無需嘗試渲染它們。 它基本上讓你嘗試呈現undefined 。 所以基本上只需刪除該行：

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

Answer 2

嘗試將其添加到您的主文件中

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