Home 不包含名为 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组件，但是我在控制台中遇到了一个错误:

enter image description here

发生什么事了？

166420 次浏览
小开
最佳答案

这个错误告诉你你导入的代码不正确，下面是你需要添加的代码:

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

这是不正确的，因为您将导出作为默认导出，而不是作为命名导出:

export default Home;

您导出的是 作为默认值，而不是一个名称。因此，导入 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

在您的情况下，Home 被导出为默认值。当您没有指定某段代码的某个名称时，将从模块导入这个名称。当您导入并省略大括号时，它将在您从中导入的模块中查找默认导出。所以你的进口应该是,

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

参考资料:

小开

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

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

我只是碰到了这个错误消息(在升级到 nextjs 9之后，一些已传输的导入开始出现这个错误)。我设法用这样的语法修复了它们:

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

我们也可以利用

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

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

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

默认

 import Home from './layouts/Home';

默认导出类

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

Both case don't need to write 

export default Home;

下课后。

小开

这就是解决办法:

  • 打开你的文件 Home.js
  • 请确保在文件的末尾像这样导出文件:
export default Home;
小开

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

小开

听起来可能很疯狂，我花了将近一个小时来解决一个类似的问题，重新启动本地主机，然后它自己接起来了。虽然很荒谬，但重新开始就能解决所有问题。 对我来说，问题的组成部分是注销。

我进口的喜欢: import {Logout} from './components';

用这个定义力他注销组件 export default Logout

不管是不是花括号，它都很好用


提交答案