Así que aquí hay un fragmento de código de mi App.js,

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

Ahora, cuando hago clic en el botón de perfil, me lleva a una página de perfil en blanco y no hay errores, y todo se compila. Aquí está el código de la página ProfileScreen,

 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

Ahora, el problema aquí es que cada vez que actualizo la página, ¡console.log("hola") (una prueba) aparece en las herramientas de desarrollo! También aparece en la página principal antes de que me lleven a la página de perfil. También en el archivo css, puedo cambiar todo el color de fondo usando

 * { background-color:black; }

Entonces, algo está funcionando claramente, ya que puedo cambiar el fondo de la página de perfil, pero cada vez que me dirijo a la clase profileScreen, no aparece nada y mi h1 nunca aparece, incluso sin estilo, cuando debería aparecer texto. Soy muy nuevo en reactJS y react-router-dom, ¡así que agradecería cualquier ayuda! gracias.