检查渲染方法答案

【问题标题】：Check the render method检查渲染方法
【发布时间】：2018-02-13 14:53:21
【问题描述】：

我正在使用 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')
  );

任何帮助将不胜感激。如果您想了解更多详细信息，请告诉我

【问题讨论】：

您确定import App from './components/App'; 语句正确吗？
检查Header、HomePage和Routes组件的导出。如果您不默认导出它们，则需要像import { Home } from '/path/to/Home/component.js' 一样导入它们。你能从这些组件中发布sn-ps吗
是的，我确信 App 的导入语句是正确的。我正在使用可视代码。当我将鼠标悬停在此语句时。它显示了 App.js 文件的正确路径
您的 routejs 似乎关闭了。 export default () => ( <Route ... /> ) 应该修复它
@user3661407 你能告诉我你如何解决这个问题我也面临同样的问题。谢谢

标签： reactjs react-redux react-router-redux

【解决方案1】：

对于遇到此类问题的人。不要忘记我们最好的 javascript 朋友！

React 已经明确表明你在 <App /> 组件中有问题，所以首先尝试在你的索引中做 console.log(App) 看看它返回了什么。

然后通过在<App /> 中逐个删除组件来挖掘，看看是哪一个导致了问题。

【讨论】：

【解决方案2】：

其他遇到此问题的人，请确保您在路由中使用的任何组件都有导出默认值，否则您将遇到此错误。

【讨论】：

【解决方案3】：

在您的 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';

【讨论】：

默认导出可以在没有{}的情况下导入

【解决方案4】：

对我来说，在你的情况下，我似乎不得不删除 MemoryRouter 或 ConnectedRouter。

另外，请注意，我的问题在我的 App.test.js 文件中，因此它可能不适用于 OP 的特定用例，但它可能会帮助那些通过 Google 来到这里的人。

有人能解释一下为什么会这样吗？

这是现在工作的代码：


<Provider store={store}>
     <App />
</Provider>

这是原始的非工作代码：


<Provider store={store}>
    <ConnectedRouter history={history}>
        <App />
    </ConnectedRouter>
</Provider>

【讨论】：