I can't able to see any UI in my browser. But error in browser console while routing using react-router-dom package.

import HomePage from "./components/HomePage";
import ContactPage from "./components/ContactPage";
import ProjectPage from "./components/ProjectPage";
import AboutPage from "./components/AboutPage";
import {Switch, Route, BrowserRouter} from "react-router-dom";
import Header from "./components/HomePage/Header";
import { Component } from "react";


class App extends Component() {
  render() {
  return (
    <>
    <Header/>
    <BrowserRouter>
    <Switch>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x6mp1tgm4qtt0z6kzr5.png)


      <Route exact path='/' component={HomePage}/>
      <Route exact path="/about" component={AboutPage}/>
      <Route exact path="/contact" component={ContactPage}/>
      <Route exact path="project" component={ProjectPage}/>
    </Switch>
    </BrowserRouter>

    </>
  );
  }
}

export default App;

import {Component} from 'react';
import './index.css'
import {Link} from 'react-router-dom'

class Header extends Component {

    render() {
        return(
        <nav>
        <div className='header'>

            <div>
                <h1>portfolio</h1>
            </div>
            <ul className='sub-header'>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/project">Project</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contant</Link></li>
            </ul>

        </div>
        </nav>
        )
    }
}

export default Header