Warning: React.createElement: type is invalid — ex

问题:

I need your help please. Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of App. in App (created by Connect(App)) in Connect(App) in Provider

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:

This is what we follow it might help you.

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

where ConfigureRoute is

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;