如何解决将websocket传递给react-router <重定向/>
我正在使用前端的React来制作网络浏览器游戏，并且大厅中的所有玩家都必须等到管理员玩家启动游戏为止。一旦管理员玩家点击“开始游戏”，我尝试将所有已连接的用户重定向到游戏室，这是另一条名为<Route path='/gameroom/:roomKey' component={GameRoom} />.的路线，我遇到的问题是，当玩家加入大厅时，我会设置一个与大厅特定的名称空间的套接字连接。
我设置了一个侦听器，以便当管理员玩家开始游戏时，后端向所有玩家发出信号BEGIN_GAME，然后像这样在前端进行处理：
//Lobby.js
socket.on(BEGIN_GAME,() => setRedirect(true))
在我对大厅组件的return声明中，
return (
<div className="container">
{(redirect) ? <Redirect to={`/gameRoom/${roomKey}`} /> : null} //<--
...
</div>
...
redirect是在组件顶部定义的变量，例如
const [redirect,setRedirect] = useState(false)
当管理员玩家开始游戏时，我想将套接字连接传递给GameRoom组件，并且尝试将to={}的{{1}}属性更改为
<Redirect />但是，这给了我奇怪的错误，并且基本上是合适的。 我收到的奇怪错误是
{(redirect) ? <Redirect to={{pathname: `/gameroom/${roomKey}`,state: { socket:socket }}} /> : null}
它指向错误发生的地方DataCloneError: Failed to execute 'replaceState' on 'History': function () {
obj.removeListener(ev,fn);
} could not be cloned.
。它给了我一堆似乎与socket.on(BEGIN_GAME,() => setRedirect(true))组件有关的堆栈跟踪。当我将其设置回Redirect时，它就转到需要我的套接字才能工作的GameRoom组件。
我想知道是否还有其他方法可以通过此套接字连接？此套接字连接不是我可以在我的应用程序中或之前全局设置的。我想最简单的方法是不重定向，只让它呈现我的<Redirect to={`/gameRoom/${roomKey}`} />组件并向下传递套接字作为道具，但是有没有办法整合GameRoom？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。