javascript - 如何在React JS中正确导入组件: expected a string but got: object ERROR

Question

我正在尝试使用 Create React App 开发一个 React 应用程序。到目前为止，似乎很简单，直到我遇到错误:Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

令人沮丧的是，我在 SO 上看到了类似的问题，并尝试遵循解决方案。 这个帖子:Element type is invalid: expected a string (for built-in components) or a class/function提出了我认为问题的解决方案可能是什么，但是，我没有得到任何快乐。我尝试删除花括号，但没有什么区别。

这是我的代码，或者至少是我认为问题可能出在的地方:

首先，<!-- .src/store.js -->文件:

import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import rootReducer from './modules';

export const history = createHistory();

// history.pushLater = (...args) => setImmediate(() => history.push(...args));

const initialState = {};
const enhancers = [];
const middleware = [
    thunk,
    routerMiddleware(history)
];

if (process.env.NODE_ENV === 'development') {
    const devToolsExtension = window.devToolsExtension;

    if (typeof devToolsExtension === 'function') {
        enhancers.push(devToolsExtension())
    }
}

const composedEnhancers = compose(
    applyMiddleware(...middleware),
    ...enhancers
);

const store = createStore(
    rootReducer,
    initialState,
    composedEnhancers
);

export default store;

其次，<!-- ./src/index.js -->文件:

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import store, { history } from './store';
import App from './containers/app';
import './index.css';
// import registerServiceWorker from './registerServiceWorker';

const target = document.querySelector('#root');

render (
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <div>
                <App />
            </div>
        </ConnectedRouter>
    </Provider>,
    target
);

// registerServiceWorker();

在文件 .src/store.js 中，createHistory已导入，但我不确定这是否正确。

history像这样导出:

export const history = createHistory();

所以我想它应该像这样用大括号导入:

import store, { history } from './store';

如有任何帮助，我们将不胜感激。

Answer 1

请大家原谅。我刚刚注意到一个完全不同的文件中有其他东西。我意识到导出的方式是正确的，我导入的方式也是正确的，但是错误仍然存​​在，这引起了很多麻烦。令我羞愧的是，问题出在一个完全不同的文件上。这实际上是一个小学生的错误:

我在做:

导出默认App();

而不是:

导出默认应用程序；

{手掌}

这是包含更正的完整文件:

import React from 'react';
import { Route, Link } from 'react-router-dom';
import Home from '../home';
import About from '../about';

const App = () => (
    <div>
        <header>
            <Link to="/">Home</Link>
            <Link to="/about-us">About</Link>
        </header>

        <main>
            <Route exact path="/" component={Home} />
            <Route exact path="/about-us" component={About} />
        </main>
    </div>
);

export default App;

再次抱歉!它可能对某人有帮助。