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 .