reactjs - React 路由组件在 reactDOM.render() = >( 元素类型无效：) @ auth0 实现中失败

Question

//package.json

{ "name": "storefront",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "auth0-js": "^9.10.0",
        "react": "^16.7.0",
        "react-bootstrap": "^1.0.0-beta.5",
        "react-dom": "^16.7.0",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1",
        "react-scripts": "2.1.3"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": [
        ">0.2%",
        "not dead",
        "not ie <= 11",
        "not op_mini all"
      ]
    }

//index.js

import  ReactDOM  from 'react-dom';
import React from 'react';
import  { makeMainRoutes }  from './routes';

const routes = makeMainRoutes();
ReactDOM.render(
  routes,
  document.getElementById('root')
);

//routes.js

import React from 'react';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import Home from './Home/Home';
import Callback from './Callback/Callback';
import Auth from './Auth/Auth';
import history from './history';

const auth = new Auth();

const handleAuthentication = (nextState, replace) => {
  if (/access_token|id_token|error/.test(nextState.location.hash)) {
    auth.handleAuthentication();
  }
}

export const makeMainRoutes = () => {
    return (
    <Router history={history} component={App}>
      <Switch>
        <Route path="/" render={(props) => <App auth={auth} {...props} />} />
        <Route path="/home" render={(props) => <Home auth={auth} {...props} />} />
        <Route path="/callback" render={(props) => {
          handleAuthentication(props);
          return <Callback {...props} /> 
        }}/>
      </Switch>
    </Router>
  );
}

//App.js

import React, { Component } from 'react';
import { Navbar, Button } from 'react-bootstrap';


// const auth = new Auth();

export default  class App extends Component {
  goTo(route) {
    this.props.history.replace(`/${route}`)
  }

  login() {
    this.props.auth.login();
  }

  logout() {
    this.props.auth.logout();
  }

  componentDidMount() {
    const { renewSession } = this.props.auth;

    if (localStorage.getItem('isLoggedIn') === 'true') {
      renewSession();
    }
  }

  render() {
     const { isAuthenticated } = this.props.auth

    return (
      <div>
        <Navbar fluid>
          <Navbar.Header>
            <Navbar.Brand>
              <a href="/">Auth0 - React</a>
            </Navbar.Brand>
            <Button
              bsStyle="primary"
              className="btn-margin"
              onClick={this.goTo.bind(this, 'home')}
            >
              Home
            </Button>
            {
              !isAuthenticated() && (
                  <Button
                    bsStyle="primary"
                    className="btn-margin"
                    onClick={this.login.bind(this)}
                  >
                    Log In
                  </Button>
                )
            }
            {
              isAuthenticated() && (
                  <Button
                    bsStyle="primary"
                    className="btn-margin"
                    onClick={this.logout.bind(this)}
                  >
                    Log Out
                  </Button>
                )
            }
          </Navbar.Header>
        </Navbar>
      </div>
    );
  }
}

//错误

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 `App`.
▶ 28 stack frames were collapsed.
Module../src/index.js
C:/Users/Alexander/Desktop/Code/StoreFront/storeFront/storefront/src/index.js:6
  3 | import  { makeMainRoutes }  from './routes';
  4 | 
  5 | const routes = makeMainRoutes();
> 6 | ReactDOM.render(
  7 |   routes,
  8 |   document.getElementById('root')
  9 | );

据我了解，TYPE 路线存在问题。makeMainRoutes 是一个为路由组件返回 JSX 标记的函数。我将它导入 index.js 并声明该函数的新实例，然后将它传递给 reactDOM 的渲染方法。我的理解有问题吗？太感谢了！我觉得我已经无计可施了。

标签： reactjsauth0react-dom