元素类型无效：应为字符串或类/函数，但已获得对象

Question

我有一个React应用，并且在呈现登录页面时遇到问题。 我已将其切碎为重新创建它所需的最低限度：

App.js

import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { LoginPage } from './LoginPage/LoginPage';

export default class App extends Component {
  displayName = App.name

  render() {
    return (
      <Layout>
            <Route path="/login" component={LoginPage} />
      </Layout>
    );
  }
}

LoginPage.jsx

import React from 'react';
import { connect } from 'react-redux';

class LoginPage extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <h2>Login</h2>
        );
    }
}

function mapStateToProps(state) {
    const { loggingIn } = state.authentication;
    return {
        loggingIn
    };
}

const connectedLoginPage = connect(mapStateToProps)(LoginPage);
export { connectedLoginPage as LoginPage }; 

当我尝试运行该应用程序时，出现以下错误：

“元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

检查Connect(LoginPage)的呈现方法

通过查看类似的问题，它似乎在React的导入/导出功能中有所作用，但是我不能完全使它工作。

我被标记为该问题的重复项，但是在那里被压倒性接受的答案说要删除导入周围的花括号。 如果我在App.js中执行此操作，则错误更改为

Attempted import error: './LoginPage/LoginPage' does not contain a default export (imported as 'LoginPage').

据我所知，它可以正确导出，但是导入无论有没有括号都无法进行。