problem description
the most basic index.js to App.jsx will report an error as soon as it is finished
related codes
index.js file
import React from "react";
import ReactDOM from "react-dom";
import { HashRouter as Router } from "react-router-dom"
import App from "./components/App"
ReactDOM.render((
<Router >
<App/>
</Router>
), document.getElementById("root"));
App.jsx file
import React, {Component} from "react";
import { Link, Route, Switch } from "react-router-dom";
import Header from "./main/header"
import Login from "./main/login"
import Container from "./main/container"
import Footer from "./main/footer"
import "../componentCss/pc.css"
class App extends Component {
render() {
return (
<div>
<Header></Header>
<Switch>
<Route path="/" component={<Container/>}></Route>
<Route path="/login" component={<Login/>}></Route>
</Switch>
<Footer></Footer>
</div>
);
}
}
export default App;
result error
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of Route .
did I write something wrong?