如何在使用react-router-dom v6中的useNavigation()时停止页面刷新

Question

我见过很多关于此的问题，但没有一个对我有用。基本上，我有一个

GameScreen

组件，当游戏开始时，我希望 URL 路径从“/roomcode/lobby”更改为“/roomcode/start”。

const [roomCode, setRoomCode] = useState("");
const navigate = useNavigate();

useEffect(() => {
    socket.on("game_has_started", (info) => {
      navigate(`/${roomCode}/start`);
    });
  }, [socket]);

但是，每当游戏开始时，我的页面就会刷新，因此

roomCode

状态重置为

""

，并且页面转到“//start”，这会破坏应用程序。如何在导航时阻止

roomCode

状态重置？

Answer 1

这里的问题是您正在使用 useState 挂钩。请注意，useState 挂钩仅适用于组件。它就像一个局部变量。因此，当您导航到新组件时。它从“/roomcode/lobby”到“//start”。 所以，我建议你使用本地存储来达到你想要的结果，即持久化。

// put this code where you are generating the new room code
// replace newRoomCode with the new room code generated by your logic
localStorage.setItem('roomCode',newRoomCode)

// then change your useEffect hook as follows
useEffect(() => {
    const roomCode = localStorage.getItem('roomCode');
    socket.on("game_has_started", (info) => {
        navigate(`/${roomCode}/start`);
    });
}, [socket]);

希望能解决问题！