警告:React.createElement:type无效 - 期望一个字符串(对于内置组件)

时间:2018-02-22 10:22:13

标签: javascript reactjs redux

我需要你的帮助。 警告:React.createElement:type无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined。您可能忘记从其定义的文件中导出组件。检查App的渲染方法。     在App中(由Connect(App)创建)     在连接(应用程序)     在提供者

App.js

    import React from 'react';
    import { Router, Route } from 'react-router-dom';
    import { connect } from 'react-redux';
    import { history } from './_helpers/index';
    import { alertActions } from './_actions/index';
    import PrivateRoute from './_components/PrivateRoute.js';
    import Map from './map/Map.js';
    import LoginPage from './LoginPage/LoginPage.js';
    import RegisterPage from './RegisterPage/RegisterPage.js';
    class App extends React.Component {
    constructor(props) {
    super(props);

    const { dispatch } = this.props;
    history.listen((location, action) => {
        // clear alert on location change
        dispatch(alertActions.clear());
    });
  }
render() {
    const { alert } = this.props;
    return (
        <div className="jumbotron">
            <div className="container">
                <div className="col-sm-8 col-sm-offset-2">
                    {alert.message &&
                    <div className={`alert ${alert.type}`}>{alert.message}   </div>
                    }
                    <Router history={history}>
                        <div>
                            <PrivateRoute exact path="/" component={Map} />
                            <Route path="/login" component={LoginPage} />
                            <Route path="/register" component={RegisterPage} />
                        </div>
                    </Router>
                </div>
            </div>
        </div>
    );
    }
    }

    function mapStateToProps(state) {
      const { alert } = state;
     return {
    alert
      };
      }

      export default connect(mapStateToProps)(App);

index.js

  import React from 'react';
  import { render} from 'react-dom';
  import { Provider } from 'react-redux';
  import { store } from './_helpers';
  import App from './App.js';
  import './index.css'; // postCSS import of CSS module
  import { configureFakeBackend } from './_helpers';
  configureFakeBackend();
  render(
      <Provider store={store}>
       <App />
      </Provider>,
document.getElementById('root') );

1 个答案:

答案 0 :(得分:0)

这是我们遵循它可能对您有所帮助。

render(<ConfigureRoute store={store} />, document.getElementByid('root'));

其中ConfigureRoute是

const ConfigureRoute = props => (<Provider store={props.store}>
    <Router history={history}>
  <App>
    <Route
      exact
      path="/login"
      render={routeProps => <LoginContainer {...routeProps} {...props} />}
    /></App></Router></Provider>

const App = props => props.children;