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

打印你好（来自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')
);

React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined

2 个答案: