嘗試導入錯誤：“./components/headerComponent/header”不包含默認導出（導入為“標題”）

Question

我正在嘗試將 header 從一個文件導入到另一個文件，但它不起作用。

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

這是我正在嘗試導入的 header 的代碼

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

我在這里做了一個嘗試。

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

快樂編碼：:)

Answer 2

考慮到將導入語句更改為此

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