Компонент, импортированный в другой компонент, не отображается - Reactjs

Question

Привет, я только начал изучать основы React и столкнулся с проблемой рендеринга моего компонента в другом компоненте.

<Header> компонент, импортированный в index.js, не отображается.

index.js:

import React, {Component} from 'react';
import { render } from 'react-dom';

import Header from './components/Header';
import Home from './components/Home';

class App extends Component{
    render(){
        return(
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <div className="col-xs-10 col-xs-offset-1">
                           <Header />
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">

                    </div>
                </div>

            </div>
        );
    }
}

render(<App />, window.document.getElementById('container'));

У меня есть эта ошибка: Error: Minified React error #130; visit http://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Header.js компонент также:

import React from "react";

export class Header extends React.Component {
    render() {
        return (
            <nav className="navbar navbar-default">
                <div className="container">
                    <div className="navbar-header">
                        <ul className="nav navbar-nav">
                            <li><a href="">Home</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        );
    }
}

Answer 1

Когда вы открываете URL, он говорит:

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: undefined.

Что означает:

• Вы забыли импортировать Header в файл
• вы импортируете его неверным образом,
• Header не экспортируется в файл
• все вышеперечисленное

После редактирования:

Вам нужно исправить экспорт (как я писал выше) в:

export default class Header extends React.Component {

Вы скучаете по default.