Auto redirect page use websocket and reactJS-CodePudding

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.

CodePudding user response：

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;

CodePudding user response：

Fixed your code a bit.

import React, { useEffect } 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) {
    const navigate = useNavigate()

    useEffect(() => {
        socket.on("payment_123", (arg) => { 
            navigate('/address/payment_123');
        });

        return () => {

           socket.off("payment_123")
        };

    }, [socket])


 
    return (
        <div>
            
            <div className="row"> 
                <div className="col">
                Product View Body
                </div> 
            </div>
        </div>
    );
}

export default Product;

It's best to keep your sockets in a useEffect hook so you could clean up later e.g. socket.off("payment_123")

Secondly the useNavigate hook should be at the top level.