javascript - 命名导出无法识别

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