警告:React.createElement:类型无效——需要一个字符串(对于内置组件)

IT技术 javascript reactjs redux
2021-05-27 08:43:08

我需要你的帮助。警告:React.createElement:类型无效——需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:未定义。您可能忘记从定义组件的文件中导出组件。检查App. 在应用程序中(由 Connect(App) 创建)在提供程序中的 Connect(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);

索引.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个回答

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

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;