Estoy usando useNavigate
para ir al componente y necesito pasar datos (un estado) a este componente ChatRoom
cuando hago clic en un botón. Este componente está en la ruta /chatroom
. Estoy usando React Router Dom v6
. He leído la documentación pero no puedo encontrar lo que estoy buscando.
export default function Home() { const [username, setUsername] = useState(""); const [room, setRoom] = useState(""); const navigate = useNavigate(); const handleClick = () => { navigate("/chatroom"); }; return (<button type="submit" className="btn" onClick={() => { handleClick(); }} > Join Chat </button> )}
Puede pasar datos al componente que corresponde a /chatroom
así:
navigate('/chatroom', { state: "Hello World!" });
Y consuma con la ayuda de useLocation
de esta manera:
import {useLocation} from "react-router-dom"; function ChatRoom() { const { state } = useLocation(); return ( <div> {state} </div> ); } export default Chatroom;
Si desea pasar varios estados, use un objeto, así:
navigate('/chatroom', { state: {id:1, text: "Hello World!"} });
Como puede probarlo aquí en este CodeSandbox , solo funciona si los datos pasados se llaman state
.