[解決済み] Homeという名前のエクスポートが含まれていない

質問

で仕事をしていました。 create-react-app というエラーが出て、この問題に行き当たりました。

HomeはHomeという名前のエクスポートを含んでいません。

以下は、私が設定した方法です。 App.js ファイルを作成します。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Home } from './layouts/Home'

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello
        <Home />
      </div>
    )
  }
}

export default App;

今、私の中で layouts フォルダーにある Home.js というファイルがあり、以下のように設定されています。

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <p className="App-intro">
        Hello Man
      </p>
    )
  }
}

export default Home;

ご覧の通り、エクスポートしているのは Home コンポーネントを使用しています。でも、コンソールにこんなエラーが出るんです。

どうしたんですか？

どうすればいい？

エラーは、インポートが正しくないことを告げています。以下は、あなたが追加しなければならないコードです。

import { Home } from './layouts/Home';

これは、名前付きエクスポートではなく、デフォルトのエクスポートとしてエクスポートしているため、正しくありません。この行を確認してください。

export default Home;

をエクスポートしています。 をデフォルトとして としてではなく、名前としてです。したがって、インポート Home のようにします。

import Home from './layouts/Home';

中括弧がないことに注意してください。さらに詳しい情報は import と export .