Home 不包含名为 Home 的导出

Question

我在使用 create-react-app 时遇到了这个问题，我得到了一个错误：

Home does not contain an export named 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 组件。但是我的控制台出现错误：

这是怎么回事？

Answer 1

错误提示您导入不正确。这是您必须添加的代码：

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

这是不正确的，因为您导出为默认导出，而不是命名导出。检查这一行：

export default Home;

您正在导出 作为默认值 ，而不是名称。因此，像这样导入 Home：

import Home from './layouts/Home';

注意没有大括号。进一步阅读 import and export。

Answer 2

使用

import Home from './layouts/Home'

而不是

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

从主页中删除 {}

Answer 3

在这种情况下，您混淆了 default 导出和 named 导出。

在处理 named 导出时，如果您尝试导入它们，您应该使用花括号，如下所示，

import { Home } from './layouts/Home'; // if the Home is a named export

在您的例子中，主页是作为默认主页导出的。当您没有指定某段代码的特定名称时，这是将从模块中导入的那个。当您导入并省略大括号时，它将在您导入的模块中查找默认导出。所以你的导入应该是，

import Home from './layouts/Home'; // if the Home is a default export

一些参考看：

Answer 4

您可以使用两种方法来解决这个问题，我认为最好的第一种方法是用下面的方法替换代码的导入段：

import Home from './layouts/Home'

或者不带默认导出你的组件，这被称为命名导出，像这样

import React, { Component } from 'react';

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

export {Home};

Answer 5

我只是运行进入此错误消息（升级到 nextjs 9 后，一些 t运行spiled 导入开始出现此错误）。我设法使用如下语法修复它们：

import * as Home from './layouts/Home';

Answer 6

我们也可以用

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

在 class 关键字之前使用导出关键字。

export class Home extends React.Component{
    render(){
        ........
    }
}

默认

 import Home from './layouts/Home';

默认导出 class

 export default class Home extends React.Component{
    render(){
        ........
    }
 }

两种情况都不需要写

export default Home;

在 class 之后。

Answer 7

这是解决方案：

转到您的文件Home.js
确保在文件末尾像这样导出文件：

export default Home;

Answer 8

将 export { Home }; 放在 Home.js 文件的末尾

Home 不包含名为 Home 的导出

Home does not contain an export named Home

javascript

ecmascript-6

reactjs

create-react-app