使用react-router-dom v6的useNavigate时如何阻止页面刷新并保留roomCode状态

核心问题 #

页面刷新导致useState存储的roomCode丢失，本质是组件重新挂载后状态未被恢复。以下是几种可行的解决方法：

方法1：从URL参数中直接获取roomCode #

既然当前路径是/roomcode/lobby，可以通过react-router-dom的useParams钩子直接从URL提取roomCode，无需依赖组件状态，即使页面刷新也能拿到有效值：

import { useParams, useNavigate } from 'react-router-dom';

const GameScreen = () => {
  // 假设路由配置为 /:roomCode/lobby 和 /:roomCode/start
  const { roomCode } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    const handleGameStart = (info) => {
      navigate(`/${roomCode}/start`);
    };

    socket.on("game_has_started", handleGameStart);
    // 组件卸载时清理监听，避免内存泄漏
    return () => socket.off("game_has_started", handleGameStart);
  }, [socket, roomCode, navigate]);

  // 其他组件逻辑...
};

方法2：将roomCode持久化到localStorage #

如果无法从URL提取，可将roomCode同步到localStorage，组件初始化时读取：

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const GameScreen = () => {
  // 初始化时从localStorage读取roomCode
  const [roomCode, setRoomCode] = useState(localStorage.getItem('roomCode') || "");
  const navigate = useNavigate();

  // roomCode更新时同步到localStorage
  useEffect(() => {
    if (roomCode) {
      localStorage.setItem('roomCode', roomCode);
    }
  }, [roomCode]);

  useEffect(() => {
    const handleGameStart = (info) => {
      navigate(`/${roomCode}/start`);
    };

    socket.on("game_has_started", handleGameStart);
    return () => socket.off("game_has_started", handleGameStart);
  }, [socket, roomCode, navigate]);

  // 设置roomCode的逻辑（比如从接口或用户输入获取）
  const setRoom = (code) => {
    setRoomCode(code);
  };

  // 其他组件逻辑...
};

额外检查：避免页面强制刷新 #

react-router的navigate默认是单页导航，不会触发页面刷新。如果仍然出现刷新，检查：

• 是否在socket事件中调用了window.location.reload()或类似刷新方法
• 是否使用了原生<a>标签而非react-router的<Link>组件
• 路由配置是否存在错误导致页面重载

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