Estoy tratando de crear una aplicación de pila completa en React, pero una vez que compilo mi aplicación e intento actualizar la página del navegador React, aparece el siguiente error:

 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

React me dice que verifique mi función de renderizado para mi GameComponent.jsx.

Aquí está el GameComponent.jsx

 import React, {Component} from 'react'; import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; import AuthenticatedRoute from './AuthenticatedRoute.jsx'; import LoginComponent from './LoginComponent.jsx'; import LogoutComponent from './LogoutComponent.jsx'; import WelcomeComponent from './WelcomeComponent.jsx'; import HeaderComponent from './HeaderComponent.jsx'; import FooterComponent from './FooterComponent.jsx'; import ErrorComponent from './ErrorComponent.jsx'; class GameComponent extends Component{ render(){ return ( <div className = "GameComponent"> <Router> <> <HeaderComponent/> <Switch> <Route path = "/" exact component ={LoginComponent}/> <Route path = "/login" component ={LoginComponent}/> <AuthenticatedRoute path = "/welcome/:name" component ={WelcomeComponent}/> <AuthenticatedRoute path = "/logout" component ={LogoutComponent}/> <Route component = {ErrorComponent}/> </Switch> <FooterComponent/> </> </Router> </div>) } } export default GameComponent;

Aquí está mi App.js:

 import GameComponent from './components/GameComponent'; import './bootstrap.css'; function App() { return ( <div className="App"> <GameComponent/> </div> ); } export default App;

Lo siento de antemano por el código desordenado/los malos principios, recién comencé a aprender. Si alguien tiene alguna idea, por favor comparta!