當用戶在 history.push() 之后按下“返回”按鈕時，我們可以刷新頁面嗎

Question

在我的反應應用程序中，我有一個按鈕可以用history.push()玩游戲

const handle = () => {
    history.push("/game");
    setPlayer({...player, inLobby: false, inGame: true});
};

<button onClick={handle}>
    Play !
</button>

在游戲中，我有一個提示，當他按下返回和刷新按鈕時警告用戶。

<Route path="/lobby">
    {player.inLobby ? <Lobby/> : <Redirect to="/"/> }
</Route>
<Route path="/game">
    {player.inGame ? <Play/> : <Redirect to="/"/>}
</Route>

當用戶刷新頁面時，沒有問題，他用刷新的頁面返回"/" 。
但是當用戶按下返回按鈕時，他返回到"/"並且頁面沒有刷新。
如何強制刷新頁面？

Answer 1

您可以使inGame和inLobby無效，以便Router執行其邏輯或使用 vanilla javascript location.href = '/'但這將導致丟失活動狀態。

Answer 2

您沒有在handle功能中正確更新您的播放器。

快速解決

const handle = () => {
  setPlayer(prevState => (
   {...prevState, inLobby: false, inGame: true}
  ))
  history.push("/game")
}

解釋

不要使用當前狀態值player來設置setPlayer 。 使用最佳實踐方法通過prevState更新您的狀態。

在您的情況下，您需要設置狀態，然后在setState之后推送到另一個頁面，因此使用 a ，將在setState之后調用history.push