Ошибка при попытке импорта: "./components/headerComponent/header" не содержит экспорт по умолчанию (импортирован как "Заголовок")

Question

Я пытаюсь импортировать заголовок из одного файла в другой, но это не работает.

import React from 'react';
import { Typography, Card, CardContent } from '@material-ui/core';
import Header from './components/headerComponent/header';


export default function Home() {
    return (
        <div className="Page">

            <Header />

            <div  className="this">
                <h2>Welcome Back!</h2>
            </div>

        </div>
    );
}

Это код заголовка, который я пытаюсь импортировать

import React, { Component } from 'react';
class Header extends Component {
  render() {
    return (
      <header>
        Dashboard
      </header>
    );
  }
}

export default Header;

Я все время получаю эту ошибку:

Attempted import error: './components/headerComponent/header' does not contain a default export (imported as 'Header').

Answer 1

изменить оператор импорта на это с учетом

import Header from './components/headerComponent/header.component';

Answer 2

Я попробовал здесь.

https://codesandbox.io/s/fancy-butterfly-r33ur?file= / src / components / headerComponent / header. js

Пожалуйста, примите ответ, если он решает вашу вопрос, щелкнув сладкую серую галочку. Спасибо.

Удачного кодирования! :)