I am trying to build a full-stack application in React, but once I compile my application and try to refresh the React browser page, it gives me the following error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
React tells me to check my render function for my GameComponent.jsx.
Here is the 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;
Here is my App.js:
import GameComponent from './components/GameComponent';
import './bootstrap.css';
function App() {
return (
<div className="App">
<GameComponent/>
</div>
);
}
export default App;
I am sorry in advance for the messy code/bad principles, I just started learning. If anyone has any ideas, please share!