我正在使用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应用程序文件代码如下所示。
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')
);
如有任何帮助,我们将不胜感激。如果您想了解更多详情,请告诉我
对我来说,似乎我必须删除你的情况中的
MemoryRouter
或 ConnectedRouter
。
另外,请注意,我的问题在我的
App.test.js
文件中,因此它可能不适用于 OP 的特定用例,但它可能会帮助那些通过 Google 到达这里的人。
有人可以解释一下为什么会这样吗?
这是现在正在运行的代码:
<Provider store={store}>
<App />
</Provider>
这是原始的非工作代码:
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>
任何其他遇到此问题的人,请确保您在路线中使用的任何组件都有导出默认值,否则您将遇到此错误。
对于那些遇到此类问题的人。不要忘记我们在 javascript 中最好的朋友!
React 已经明确表示您的
<App />
组件存在问题,因此首先尝试在索引中执行 console.log(App)
来查看它返回的内容。
然后通过将
<App />
中的组件一一移除来深入挖掘,看看是哪一个导致了问题。
我也面临着类似的问题。看看这个,看看是否对您有帮助 - LINK
在导入组件时,请确保在 App.js 文件中写入
{}
像下面这样
import {Header} from './common/Header';
import {HomePage} from '../components/home/HomePage';
这将解决问题。
如果您有一些默认导出组件,可以在不使用 {} 的情况下提及。
像下面这样
import Header from './common/Header';
如果一个js文件中有多个组件,可以这样写
import Header,{OtherComponent1,OtherComponent2} from './common/Header';