无法识别命名导出

Question

我有这样的结构：

routes
  auth
    login
      index.js
      Login.jsx
    routes.js

在 routes.js 文件中我有以下内容：

import { Route } from 'react-router-dom';
import { Login } from './login';

export default (
  <div>
    <Route path="/login" component={Login} />
  </div>
)

在 login/index.js 我有这个：

import Login from './Login';

export const Login;

但出于某种原因我收到此错误：

Attempted import error: 'Login' is not exported from './login'.

我做错了什么？

Answer 1

由于您将 login/index.js 顶部的 Login 导入为 import Login from './Login';，因此它已被声明。 Login 的值将是您的 Login.jsx 文件中的默认导出（例如：export default Login）。

因为它已经声明了，所以你不能用 const 重新声明它。如果你希望它是一个命名的导出（这样你就可以将它用作 import { Login } from './login';）那么你可能希望 export { Login } 在你的 login/index.js 文件中：

import Login from './Login';

export { Login };

无法识别命名导出

Named export not recognized

javascript

import

ecmascript-6

reactjs