title: React Private Route Error Element type is invalid: expected a string (for built-in components)
body: <p><strong>i created private route in react to make some routes private in my react app</strong></p>
  
  <pre><code>import React from 'react'
  import Auth from '../../Authentication/Auth'
  import { Redirect, Route } from 'react-router-dom'
  
       const PrivateRoute = ({ component: Component, role, ...rest }) =&gt; (
          &lt;Route {...rest} render={props =&gt; {
              const loggedIn = Auth.isAuthenticated;
              if (!loggedIn) {
                  // not logged in so redirect to login page with the return url
                  return &lt;Redirect to={{ pathname: '/login', state: { from: props.location } }} /&gt;
              }
  
  
              // check if route is restricted by role
              if (Auth.getUserLevel() !== role) {
                  // role not authorised so redirect to home page
                  return &lt;Redirect to={{ pathname: '/home'}} /&gt;
              }
  
              // authorised so return component
              return &lt;Component {...props} /&gt;
          }} /&gt;
      )
      export default PrivateRoute;
  </code></pre>
  
  <p>and i called it in app.js</p>
  
  <pre><code>import React, { Component } from 'react';
      import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
      import  AdminPage  from './Containers/AdminPage/AdminPage'
      import PrivateRoute from './Components/PrivateRoute/PrivateRoute'
      import Login from './Containers/Login'
  
      class App extends Component {
        cnt=0;
        render() {
          return (
            &lt;Wrapper&gt;
  
              &lt;NavBar /&gt;
  
              &lt;Router&gt;
                &lt;Switch&gt;
                  &lt;Route path="/login"&gt;
                    &lt;Login /&gt;
                  &lt;/Route &gt;
                  &lt;PrivateRoute path="/AdminPage" Component={AdminPage} role='sm'/&gt;
                &lt;/Switch&gt;
              &lt;/Router&gt;
  
            &lt;/Wrapper&gt;
          )
        }
      }
  
      export default App;
  </code></pre>
  
  <p>and when i try to run the app it gives me this error
  ×</p>
  
  <p>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.</p>