So here is a snippet of code from my App.js,

return (
<div className="app">
  <Router>
    {!user ? (
      <LoginScreen />
    ) : (
      <Switch>
        <Route path='./profile'>
          <ProfileScreen />
        </Route>
        <Route exact path="/">
          <HomeScreen />
        </Route>
      </Switch>
    )}
  </Router>
</div>

Now when I click on the profile button, it takes me to a blank profile page and there are no errors, and everything compiles. Here is the ProfileScreen page code,

import React from 'react'
import './ProfileScreen.css'

function ProfileScreen() {
return (
    <div className='profileScreen'>
        <h1>
            this is the profile screen
        </h1>
    </div>
)
}
 console.log("hello")

export default ProfileScreen

Now the issue here is that every time I refresh the page the console.log("hello") (a test) shows up in developer tools! It also shows up in the main page before I am taken to the profile page. Also in the css file, I can change the entire background color using

* {
   background-color:black;
}

So something is clearly working as I can change the background of the profile page but whenever I target the profileScreen class nothing shows up and my h1 never shows up even without styling when there should be text showing up. I am very new to reactJS and react-router-dom so I would appreciate any help! thank you.