Question

我正在尝试使用React路由器根据url和基本内容显示正确的页面。唯一的问题是我遇到了从未见过的错误。在这里：

元素类型无效：预期为字符串（对于内置组件）   或类/函数（用于复合组件），但得到：对象。您   可能忘记了从定义的文件中导出组件，   否则您可能混淆了默认导入和命名导入。

检查Home的呈现方法。

不确定为什么会看到这个。希望大家都能看到我所缺少的东西。这是我的index.js的代码示例：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from "react-router-dom";

function doRender() {

    ReactDOM.render(
        <Router>
            <div>
                <App/>
            </div>
        </Router>, document.getElementById('root'));
}

doRender();

serviceWorker.unregister();

这是App.js：

import React, { Component } from 'react';
import './App.css';
import { Route } from 'react-router-dom';
import Home from './Components/Home';


class App extends Component {
  render() {
    return (
        <div>
            <Route exact path="/" component={Home}/>
        </div>
    );
  }
}

export default App;

最后，这是主页的代码：

import React, { Component } from 'react';
import '../index.css';
import MenuBar from '../SubComponents/MenuBar';
import bgVideo from '../Media/bg-video.mp4';

class Home extends Component {
    render() {
        return (
            <div className="App">
                <div className='MenuBar'>
                    <MenuBar/>
                </div>
                <div className="bg-video">
                    <video loop autoPlay>
                        <source src={bgVideo} type="video/mp4"/>
                    </video>
                </div>
            </div>
        );
    }
}

export default Home;

在此先感谢您的帮助！

ReactDOM.render产生错误的元素类型无效

0 个答案: