ahora estoy creando una combinación de proyectos con ReactJs, Websocket y nodeJS. Todavía soy nuevo en reactJs y necesito implementar la redirección automática después de obtener datos, use el websocket que se envía en nodeJs a reactJs. pero me cuesta cómo implementarlo.
aquí está mi código
import React from 'react'; import { Redirect, Router, useHistory, useNavigate } from "react-router-dom"; import { io } from "socket.io-client"; const socket = io("ws://localhost:3000"); function Product(props) { socket.on("payment_123", (arg) => { // 1st try code // this.props.history.push('/address/payment_123'); // 2nd try code // this.setState({ redirect: '/address/payment_123' }); //3rd try code // browserHistory.push('/address/payment_123'); //4th try code // Router.transitionTo('/address/payment_123'); //5th try code // const navigate = useNavigate(); // navigate('/address/payment_123', { replace: true }); }); return ( <div> <div className="row"> <div className="col"> Product View Body </div> </div> </div> ); } export default Product;Ya probé esos 5 códigos, pero nadie puede trabajar ... por favor, ayúdenme a cómo puedo redirigirlo automáticamente.
Puede hacer su lógica dentro de useEffect con la función async . Puede usar useHistory o useNavigate
import React from 'react'; import { Redirect, Router, useHistory, useNavigate } from "react-router-dom"; import { io } from "socket.io-client"; function Product(props) { const history = useHistory(); //or you can use navigate // const navigate = useNavigate(); const socketTrigger = async () => { const socket = await io("ws://localhost:3000"); const socketOn = await socket.on("payment_123", (arg) => { //Here do your logic }); history.push('HERE PUT YOUR URL') //or use navigate here up to you } useEffect(() => { socketTrigger(); },[]) return ( <div> <div className="row"> <div className="col"> Product View Body </div> </div> </div> ); } export default Product;