Home不包含名为Home的导出

我正在与之合作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组件，但是在控制台中却显示了一个错误。

到底是怎么回事？

错误告诉您导入不正确。您现在拥有的代码：

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

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

export default Home;

您要导出为default而不是名称。因此，Home像这样导入：

import Home from './layouts/Home';

请注意，没有大括号。进一步阅读import和export。

用

import Home from './layouts/Home'

而不是

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

删除{}从首页

在这种情况下，您混淆了默认导出并命名为导出。

处理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

一些参考看：

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export
• https://medium.com/@trekinbami/a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0

我只是遇到了这个错误消息（升级到nextjs 9后，一些已转译的导入开始出现此错误）。我设法使用以下语法修复了它们：

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

我们也可以使用

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

在类关键字之前使用export关键字。

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

对于默认

 import Home from './layouts/Home'; 

默认导出类别

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

两种情况都不需要写

export default Home;

下课以后。

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

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

这是解决方案：

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

export default Home;