我正在使用react,redux和react-redux-router。当我运行一个应用程序时,我收到一个错误。我不明白它与我的App.js中的react函数有什么关系。在我看来,问题在于代码中的其他地方。
错误如下:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.
in App
in Router (created by ConnectedRouter)
in ConnectedRouter
in Provider
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.
我的javascript App文件代码如下所示。
import React from 'react';
import Header from './common/Header';
import HomePage from '../components/home/HomePage';
import Routes from '../routes';
const App = () => (
<div>
<Header />
<Routes />
</div>
)
export default App;
我的Javascript索引文件代码如下所示
import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {BrowserRouter as Router} from 'react-router-dom';
import configureStore, {history} from './store/configureStore';
import {loadProducts} from './actions/homeAction';
import routes from './routes';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import {ConnectedRouter} from 'react-router-redux';
import createHistory from 'history/createBrowserHistory'
import App from './components/App';
const store = configureStore();
store.dispatch(loadProducts("http://localhost:1219/portal/getProducts"));
render(
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
document.getElementById('app')
);
任何帮助将不胜感激。如果您想了解更多详情,请告诉我们
答案 0 :(得分:0)
对我来说,似乎您必须删除MemoryRouter
或ConnectedRouter
。
此外,请注意,我的问题在我的App.test.js
文件中,因此它可能不适用于OP的特定用例,但可能会对通过Google到达这里的您有所帮助。
有人可以解释为什么这样做吗?
这是现在可以运行的代码:
<Provider store={store}>
<App />
</Provider>
这是原始的无效代码:
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>
答案 1 :(得分:0)
任何其他遇到此问题的人,请确保为您在路由中使用的任何组件设置导出默认值,否则您将遇到此错误。
答案 2 :(得分:0)
对于那些遇到此类问题的人。不要忘记我们最好的 javascript 朋友!
React 已经明确表示您在 <App />
组件中存在问题,因此首先尝试在您的索引中执行 console.log(App)
以查看它返回的内容。
然后通过在 <App />
中一一删除组件来深入挖掘,看看是哪一个导致了问题。
答案 3 :(得分:-2)
在导入组件时,请在您的 App.js 文件中,然后确保在{}
如下所示
import {Header} from './common/Header';
import {HomePage} from '../components/home/HomePage';
这将解决问题