在我的根组件上，我像这样设置套接字，

const [socket, setSocket] = useState(null);
const setupSocket = () => {
    const token = localStorage.getItem('CC_Token');
    if (token && token.length > 0 && !socket) {
      const newSocket = io('http://localhost:8000', {
        query: {
          token: localStorage.getItem('CC_Token'),
        },
      });

      newSocket.on('disconnect', () => {
        setSocket(null);
        setTimeout(setupSocket, 3000);
        makeToast('error', 'Socket disconnected!');
      });

      newSocket.on('connect', () => {
        makeToast('success', 'Socket Connected');
      });

      setSocket(newSocket);
    }
  };

  useEffect(() => {
    setupSocket();
  }, []);

并使用react-router我将套接字实例作为道具传递。

<Route
  exact
  path="/chatroom/:id"
  render={() => <ChatroomPage socket={socket} />}
/>;

直到我刷新页面为止，它都可以正常工作。当我刷新页面套接字时，它返回到其初始状态（空），因此，我无法发送任何消息。

此代码段来自CharoomPage组件。

  React.useEffect(() => {
    if (socket) {
      socket.emit("joinRoom", {
        chatroomId,
      });
    }

    return () => {
      //Component Unmount
      if (socket) {
        socket.emit("leaveRoom", {
          chatroomId,
        });
      }
    };
    //eslint-disable-next-line
  }, []);

在页面上的刷新套接字为null，因此它无法发出joinRoom事件。

如何实现此功能，以便在页面刷新时发出joinRoom事件？