React 浏览器点击后退,如果是 react 页面返回到 erb 页面,只有 url 部分变化了,页面没有渲染

kevinyu · 2020年05月28日 · 3904 次阅读

背景:

项目部分功能采用 react 作为前端,部分页面采用 erb 页面由后端渲染,当先进入 erb 页面然后再点击 react 页面时,点击浏览器后退就会出现 url 变化了页面不渲染的问题,如果是 erb 页面前进后退都会加载 bf cache,react 前进后退也会根据路由渲染。 所以想问一下如何让 react 在前进后退到 非 react 页面时 调用浏览器缓存渲染页面,而不是单单的改变了 url

react 部分跳转页面是这样实现的

window.router.navigate("/url", trigger: true)

我的尝试:

1.我一开始尝试监听popstate事件,如果访问的连接不在 react 路由中就执行 window.location.go() 操作; 但是这样的效果并不好,前进的事件也会被监听并触发 (比如某些 react 中的下一步操作也会触发);

接下来准备尝试

1.用 react-history 接管在 react 部分的前进后退这种操作

最后希望朋友们也分享一下经验

暂无回复。
需要 登录 后方可回复, 如果你还没有账号请 注册新账号