按浏览器后退按钮会撤消我的状态而不是返回答案

【问题标题】：Pressing the browser back button undoes my state instead of going back按浏览器后退按钮会撤消我的状态而不是返回
【发布时间】：2021-09-13 12:57:41
【问题描述】：

我的 React 网站有一个带有“下一个”和“上一个”按钮的视频轮播，用于循环播放各种视频。我保存当前正在显示的视频的 URL 状态。这样，当按下“下一个”或“上一个”按钮时，我只需使用适当的视频 URL 更新状态并显示该视频。

由于某种原因，浏览器的后退按钮现在会在返回上一页之前一一撤消所有状态更改。因此，例如，如果我按“下一步”、“下一步”、“下一步”，我将不得不按浏览器后退按钮 4 次才能转到上一页。我不知道为什么，我已经用 Google 搜索了我自己盲目地试图解决这个问题。

当用户按下任一按钮时调用的函数：

const changeVideo = (dir) => {
        let index = movie.videoUrls.findIndex(v => v === currentVideo)
            //movie.videoUrls contains the URLs of all the videos to be displayed
        if(dir === 'next') {
            if(index === movie.videoUrls.length - 1)
                setCurrentVideo(movie.videoUrls[0])
            else
                setCurrentVideo(movie.videoUrls[index+1])
            return;
        }
        if(dir === 'prev') {
            if(index === 0)
                setCurrentVideo(movie.videoUrls[movie.videoUrls.length - 1])
            else
                setCurrentVideo(movie.videoUrls[index-1])
            return;
        }
    }

注意：显示的视频是 YouTube 嵌入视频，如果这很重要的话。

【问题讨论】：

能否请您创建一个代码框并重新创建此问题
https://codesandbox.io/s/mystifying-browser-16zdx?file=/src/App.js 在新窗口中打开应用程序而不是内置的代码沙盒浏览器来查看问题。单击“下一步”或“上一个”按钮几次，然后按浏览器后退按钮以查看问题的实际效果。谢谢你的帮助:)

标签： reactjs react-router browser-history

【解决方案1】：

你需要给 iframe 添加一个 key 否则它会和 react 路由器混淆

只需将 currentVideo 状态作为键添加到 YoutubeEmbed 组件

这里是更新沙盒的链接

https://codesandbox.io/s/patient-brook-zqht1?file=/src/App.js

【讨论】：