尝试导入错误：“./components”不包含默认导出（导入为“App”）

Question

我有以下 ReactJS 项目结构，但出现以下错误：

./src/index.js

尝试导入错误：“./components”不包含默认导出（作为“App”导入）。

我的目标是导入这样的组件：（import { App, Navbar } from 'components';注意“组件”）而不是像./components/App，./components/App/index左右。为此，我需要在 components 目录中添加 index.js。我尝试通过以下代码执行此操作，但收到上述错误。

什么原因？我该如何解决？

有类似的线程，但我已经export default App;在 ./components/App/index.jsx 中导出它。也许原因是 .jsx 扩展名？

• 索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

• 组件/index.js

export App from './App';

• 组件/应用程序/index.jsx

import React, { Fragment } from 'react';
import './style.css';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import NotAuthorizedRoute from '../../common/NotAuthorizedRoute';
import { Navbar, Home, User, Login } from 'components';

const App = () => {
  return (
    <Fragment>
      <Router>
        <Navbar />

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/users" component={User} />
          <NotAuthorizedRoute path="/sign-in" component={Login} />
          <Redirect from="*" to="/" />
        </Switch>

      </Router>
    </Fragment>
  );
};

export default App;

• 组件/应用程序/style.css

我试过的：

我尝试执行以下操作，就像人们在此线程中所说的那样：Attempted import error: 'App' is not export from './App'。

• 组件/index.js

export { App } from './App'; // note the brackets

但后来我得到了：

./src/components/index.js
Attempted import error: 'App' is not exported from './App'.

Answer 1

您似乎对 ES6导出/导入语法有些困惑。MDN 文档非常详细，我建议您检查一下。

最重要的是记住默认和命名导出/导入之间的区别。（提示：当您在导出/导入语句中看到括号时，您正在处理命名语句）

在您的具体情况下，您必须执行以下操作：

• ./components/component-a.jsx

const ComponentA = () => {
  return (
    <MyComponent/>
  );
};

export {ComponentA};

• ./components/component-b.jsx

const ComponentB = () => {
  return (
    <MyComponent/>
  );
};

export {ComponentB};

• ./components/index.js

const ComponentA = () => {
  return (
    <MyComponent/>
  );
};

export {ComponentA};

• ./some-file.jsx

import {componentA, componentB} from './components';

• ./some-other-file.jsx

import {componentA} from './components';

这是为逻辑模块分类创建虚拟导出/导入命名空间的典型模式。

请注意，我没有使用默认导出。关于这一点有几种意见，但我建议不要使用它们来避免像您遇到的那样的错误。

另请注意，您始终必须指定components目录的完整相对路径。从中导入内容的唯一方法'components'是components在您的node_modules目录中安装一个包。