React-router 和 iframe，浏览器历史

Posted 2023-02-21

【中文标题】React-router 和 iframe，浏览器历史

【英文标题】：React-router and iframe, browser history

【发布时间】：2017-12-29 20:15:15

【问题描述】：

我遇到了任何问题。所以，我在react 中有一个组件，也使用react-router。一切都很好。这个组件有一个项目列表，当你点击一个时，它会将 url 推送到iframe[src=url]。这里出现了问题，如果我点击几个项目，然后点击上一页/后退按钮，而不是转到上一页，它只是显示被推送到iframe的url的上一个iframe。

在这种情况下我该怎么办？

@我正在使用react-router-dom v4

【问题讨论】：

按钮会改变主窗口页面的url吗？

你的意思是，当我将 url 推送到 iframe 时？不，网址保持不变。

【参考方案1】：

不要只更改 src。每次 src 更改时，您都必须更换新的 iframe。 通过这样做而不做太多改变，每次更改 src 时只需在 iframe 中添加差异键

render()
const iframe = <iframe key=this.thing.id src=this.thing.src ></iframe>
return(iframe)

【讨论】：

英语不好，但是是的。 iFrame 弄乱了我的路由器历史记录 - 直到我为 iframe 设置一个唯一键，每次显示它。如果有人解释为什么这样做会很高兴。

【参考方案2】：

只是添加到@Expl0de答案，

您应该为 key 属性添加一个唯一值，每次重用 iframe 时，该值将从 src 更改为 src。

之所以出现此问题，是因为更改 src 属性的 iframe 被视为内容导航，被推送到 window.history 浏览器堆栈。 当您返回浏览器导航时，它只会加载相同的页面、具有不同 src 属性的相同 iframe。

当添加一个在不同的src 值上改变的key 属性时，React 将卸载并重新安装这个 iframe 元素，因为它不再是“相同的元素”了。这将防止 iframe 更改浏览器的历史记录。

更深入的解释，包括 React 的 Reconciliation Process 和示例，可以在这里找到：https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/