导语:在某一作品的详情页中,点击底部 作者的其他作品 里的作品时,能够跳转至新作品的详情页,详情页路由为 /front/detailpage/ + artId 。但是目前的问题是,点击作品后路页面路由改变了,但详情页内容并不刷新
1. 原因
因为书画详情页路由是动态变化的,但component是同一个。所以页面已重新加载,但内容没有及时更新,是没有正确地处理路由变化时的页面更新的问题
同时我们需要知道:浏览器为了提高网页的访问速度和性能,会在本地缓存已经访问过的资源,包括 HTML、CSS、JavaScript 等文件。当我们重新加载页面时,浏览器会尝试从缓存中读取资源,而不是从服务器重新获取最新的内容。
2. 解决?
通过 window.location.reload() 在页面跳转时强制刷新页面
<div onClick={window.location.reload()}>
<Link to={{ pathname: '/front/detailpage/' + artData.artId }}>
<img src={artData.artPath} style={{ width: '270px', height: "180px" }} />
</Link>
</div>
但是这样就新页面会隔几秒重复刷新
因为 window.location.reload() 这个方法本身需要等待页面加载完成才能执行。如果在页面尚未加载完成的时候调用
reload() 方法,就会出现问题。 要避免这种情况,可以尝试在调用 window.location.reload()
方法前添加一个条件语句,确保方法只被调用一次
3. 解决!
可以尝试使用 setTimeout() 函数延迟 window.location.reload() 的执行,但这里我们只需要修改一点就可以,无需再添加新函数
即:将之前的函数改为箭头函数
onClick={() => {window.location.reload()}}
为什么改为箭头函数就可以了呢
因为箭头函数具有词法作用域(lexical
scoping),它可以在声明时捕获外部的变量和函数,而不是在运行时进行解析。因此,使用箭头函数会延迟
window.location.reload() 的执行,以便页面完全加载完成。