导入错误："标头"未从"组件/标头"导出

Question

我有一个名为Header的组件文件夹。Main JS文件和Styles文件。由于某种原因，我得到"import error: 'Header' is not exported from 'components/Header'"

Header.js:

const Header = () => {
return (
<div>
<h2>The Header</h2>
</div>
);
};
export default Header;

组件/头/index.js:

export * from "./Header";

App.js:

import { Header } from "components/Header";
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;

为什么不工作?

Answer 1

这是因为你做的是默认导出(export default Header)，所以你必须这样导入:

import Header from "components/Header"

如果你想使用命名导入(import {Header} from "components/Header ";)你必须离开"deafault"远离你的出口。

这个StackOverflow帖子很好地解释了差异:为什么以及何时在es6模块中使用默认导出而不是命名导出?

Answer 2

我只是通过右键单击文件并选择复制路径来复制路径,

import Header from "/Users/********/Downloads/keeper-app-part-1-starting/src/components/Header.jsx"

和它工作