尝试导入错误：“./components/headerComponent/header”不包含默认导出（导入为“标题”）

Question

I'm attempting to import a header from one file to another, but it isn't working.

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

This is the code for the header I am trying to import

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

export default Header;

I keep getting this error:

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

Answer 1

I made an attempt here.

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

Happy Coding: :)

Answer 2

change import statement to this considering

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