react js 元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义

Question

在我的 react.js 项目中，我试图添加带有react-router-tabs 。 主要想法是从/main路径重定向到/main/projects 。 其他路由是/main/users和/main/audit 。 在加载/main路径时，我收到此错误：

 Error: Element 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, or you might have mixed up default and named imports. Check the render method of `Context.Consumer`.

应用程序.js

import React, {Fragment} from 'react';
import {Router, Route, BrowserRouter} from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';


import { history } from './helpers';
import { PrivateRoute } from './components/privateRoute';
import { MainPage }  from './components/MainPage';

class App extends React.Component {
  render() {

    return (

    <div>


 <Router history={history}>
    <div className="jumbotron">
      <div className="container">
          <div style={{marginTop: "5%"}}>
            <PrivateRoute path="/main" component={MainPage} />
          </div>
      </div>
    </div>
  </Router>
  </div>
  );
 }
}

App.propTypes = {
 alert: PropTypes.string,
 loggedIn: PropTypes.bool
};
}

const connectedApp = connect()(App);
export default connectedApp;

主页.js

import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import { RoutedTabs, NavTab } from 'react-router-tabs';
import { ProjectsPage } from './ProjectsPage';
import { UsersPage } from "./UsersPage";
import { AuditPage } from "./AuditPage";
import { connect } from "react-redux";
import { PrivateRoute } from "./privateRoute";

class MainPage extends React.Component{
  constructor(props) {
    super(props);
  }
render() {

    return (
        <div>
            <RoutedTabs startPathWith={`${this.props.match.path}`}>
                <NavTab to="/projects">Projects</NavTab>
                <NavTab to="/users">Users</NavTab>
                <NavTab to="/audit">Audit</NavTab>
            </RoutedTabs>

            <Switch>
                <PrivateRoute exact path={`/main`} render={() => <Redirect replace to={`main/projects`} />} />
                <PrivateRoute exact path={`${this.props.match.path}/projects`} component={ProjectsPage} />
                <PrivateRoute exact path={`${this.props.match.path}/users`} component={UsersPage} />
                <PrivateRoute exact path={`${this.props.match.path}/audit`} component={AuditPage} />
            </Switch>
        </div>
    );
   }
};

const connectedMainPage = connect(
//mapStateToProps,
//mapDispatchToProps
)(MainPage);

export { connectedMainPage as MainPage };

私有路由.js

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';

export const PrivateRoute = ({ component: Component, ...rest }) => (
 <Route
  {...rest}
   render={props =>
    localStorage.getItem('user') ? (
    <Component {...props} />
     ) : (
    <Redirect
      to={{ pathname: '/login', state: { from: props.location } }}
    />
    )
   }
 />
);

PrivateRoute.propTypes = {
 component: PropTypes.object,
 location: PropTypes.string
};

任何解决方法的想法都会受到欢迎。 谢谢你。

UPD_1在MainPage.js我必须在以下行PrivateRoute更改为 simple Route ：

//changed PrivateRoute to Route here
<PrivateRoute exact path={`/main`} render={() => <Redirect replace to={`main/projects`} />} />

它开始工作了。 这是正确的吗？ 还有其他修复吗？ 谢谢你。