Tengo un problema con el dom del enrutador de reacción, cada vez que hago clic en el botón de inicio de sesión que debería llevarme a Chat.js, pero en su lugar solo actualiza el enlace, no la página.

Aquí está mi código en App.js

 <Router> <Route exact path="/" component={Join}/> <Route path="/chat" component={Chat}/> </Router>

Y en Join.js

 import React, { useState } from "react"; import {Link} from "react-router-dom" import "./Join.css" function Join() { const [name, setName] = useState() const [room, setRoom] = useState() return ( <div className="joinOuterContainer"> <div className="joinInnerContainer"> <h1 className="heading">Join</h1> <div><input className="joinInput" type="text" placeholder="Name" onChange={(e) => setName(e.target.value)}/></div> <div><input className="joinInput mt-20" type="text" placeholder="Room" onChange={(e) => setRoom(e.target.value)}/></div> <Link to={`/chat?name=${name}&room=${room}`}> <button type="submit" className="button mt-20">Sign In</button> </Link> </div> </div> ) } export default Join

Pensé en agregar puntas de flecha entre los componentes, es decir, {<Chat/>} y reemplazar el componente con el elemento, pero simplemente no funcionará... ¿alguna idea sobre cómo solucionar esto?

Nota: estoy usando react v18 y react-router-dom v5