now i'm creating project combine with ReactJs, Websocket and nodeJS. i still new from reactJs and i need to implement auto redirect after get data use websocket that send on nodeJs to reactJs. but i struggle how to implement it.
here is my code
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;
i already tried those 5 code but no one can work.. please help me how i able to auto redirect it.
You can do your logic inside useEffect with async function. You can use useHistory or 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;