React路由传参后点击跳转空白、刷新正常的问题修复咨询

问题原因 #

1. room状态仅在组件首次渲染时初始化，通过React Router客户端跳转时，路由参数更新不会同步到room状态，导致socket连接使用了无效的房间码。
2. 初始化socket的useEffect依赖为空数组，仅执行一次，若首次渲染时房间码未正确获取，就会导致连接异常，页面空白；而刷新页面时，浏览器重新加载，路由参数能正确解析，因此页面正常显示。

修复代码 #

目标页面MahjongGame修改如下：

import { useState, useEffect } from 'react';
import queryString from 'query-string';

const MahjongGame = (props) => {
    const [room, setRoom] = useState('')
    const [roomFull, setRoomFull] = useState(false)
    const [users, setUsers] = useState([])
    const [currentUser, setCurrentUser] = useState('')
    const [message, setMessage] = useState('')
    const [messages, setMessages] = useState([])

    // 监听路由参数变化，同步更新房间码
    useEffect(() => {
        const data = queryString.parse(props.location.search);
        if (data.roomCode) {
            setRoom(data.roomCode);
        }
    }, [props.location.search])

    // 房间码更新时，建立/重建socket连接
    useEffect(() => {
        if (!room) return;

        const connectionOptions =  {
            "forceNew" : true,
            "reconnectionAttempts": "Infinity", 
            "timeout" : 10000,                  
            "transports" : ["websocket"]
        }
        const socket = io.connect(ENDPOINT, connectionOptions)

        socket.emit('join', {room: room, playerNum: 2}, (error) => {
            if(error)
                setRoomFull(true)
        })

        return function cleanup() {
            socket.emit('disconnect')
            socket.off()
        }
    }, [room])

    // 此处补充页面渲染逻辑，比如返回JSX
    return (
        // ... 你的页面内容
    )
}

关键改动说明 #

• 新增监听props.location.search的useEffect，确保路由参数变化时，room状态能实时更新。
• 将socket连接的useEffect依赖改为room，只有当room有效时才建立连接，且房间码变化时会自动断开旧连接、建立新连接。
• 移除了直接用路由参数初始化room的写法，避免首次渲染时参数未就绪导致的无效值。

另外，你的Link组件写法正确，无需修改；若要获取state中的settingForm，可通过props.location.state访问。

内容的提问来源于stack exchange，提问作者Anson Chan