当iframe在React组件中带有动态src时，不可能进行回导航

Question

我很难理解我们项目中出现的反向导航问题。

我们在React环境(v17)中工作，使用React -router-dom (v6)，我们在我们的页面上的第三方服务上渲染iframe(因此iframe src在不同的域上)(问题也发生在NextJS中)。

呈现iframe的页面从导航状态(使用useLocation()from react-router-dom)获取url，并将其放入iframe src中。

当我们按下浏览器后退按钮(或使用history.back()，或history.go(-1)在浏览器控制台，或navigate(-1)从useNavigate钩子)，什么也没有发生，但iframe内容被重新加载。

没有popstate事件正在被调度，并且浏览器历史记录没有改变。

如果我硬编码iframe URL(所以没有从其他地方读取值)，一切都像预期的那样工作。此外，如果我刷新页面，如果我按两次后退按钮(¯()/¯)

，事情也会正常运行。我发现了一篇关于React和iframes的反向导航的有趣文章。我尝试添加一个键iframe(如Date.now())，但没有任何变化。

这里有一些草图组件来把东西放在一起。

第1页

const Page1 = () => {
const navigate = useNavigate();
// in our case we are using a GraphQL mutation. 
// this is just for demonstration purposes
return <button onClick={() => {
fetchIFrameURLOnTheServer()
.then(url => navigate('/page2', { state: { url } }))
}}>
go to iframe page
</button>
}

第2页

const Page2 = () => {
const location = useLocation();
const { url } = location.state;
return <iframe src={url} key={Date.now()} />;
}

路由器宣言

<BrowserRouter>
<Routes>
<Route element={<Layout />}> // <-- renders the <Outlet />
<Route path='path1' element={Page1}/>
<Route path='path2' element={Page2}/>
</Route>
</Routes>
</BrowserRouter>

我想知道发生了什么事，我正在寻求帮助:p谢谢您的帮助🙏

Answer 1

我和你有同样的问题，我试着用你提供的文章的解决方案来修复它，它对我有效!

我首先尝试使用Date.now()函数和一个随机函数来生成iFrame的键，但这两个函数都不起作用。

对我来说有效的是使用文章中建议的内容ID作为键，所以总而言之，我的猜测是您应该尝试使用与Date.now()不同的东西来生成iframe组件的键。