RavelloH's Blog
LOAD COMPLETED.
LOADING
.
.
.
NeutralPress
标签：PJAX - 第 1 页 | RavelloH's Blog
Keywords. Connections. Traces.
标签：PJAX
整理 & 索引 PJAX 下的所有文章。
此标签共包含 2 个文章。
当前正在查看 标签：PJAX。
第 1 页，共 1 页。
正在查看第 1 - 2 篇文章。
Back / 返回标签列表
Next.js 实现 PJAX 刷新
Next.js 实现 PJAX 刷新
2025/02/05
开发
/
前端
---
#React
#Next.js
#PJAX
#React
#Next.js
#PJAX
Next.js 中实现 PJAX 无刷新跳转的技术方案。作者针对 React 与传统 PJAX 直接修改 DOM 导致的水合冲突问题，提出了一种利用 Next.js 原生 useRouter 和 usePathname 钩子的替代方案。通过拦截全局 A 标签点击事件并结合 Zustand 进行全局状态广播，实现了类似 SPA 的页面局部加载与过渡动画效果，该方案无需复杂的服务器端配置即可在 Next.js 站点中通用。
#React
#Next.js
#PJAX
Next.js 中实现 PJAX 无刷新跳转的技术方案。作者针对 React 与传统 PJAX 直接修改 DOM 导致的水合冲突问题，提出了一种利用 Next.js 原生 useRouter 和 usePathname 钩子的替代方案。通过拦截全局 A 标签点击事件并结合 Zustand 进行全局状态广播，实现了类似 SPA 的页面局部加载与过渡动画效果，该方案无需复杂的服务器端配置即可在 Next.js 站点中通用。
我妥协了，React 与 Pjax 不可兼得
我妥协了，React 与 Pjax 不可兼得
2024/10/20
开发
/
前端
---
#React
#PJAX
#JavaScript
#React
#PJAX
#JavaScript
React 项目中集成 Pjax 失败的经验总结与视觉模拟方案。由于 React 的渲染机制与 Pjax 在脚本加载及 DOM 替换上存在冲突，作者最终决定放弃 Pjax，转而通过拦截 <a> 标签点击事件、延迟跳转以及 CSS 淡出动画来模拟 Pjax 的无刷新视觉效果，并利用 document.referrer 判断来源以优化下一页面的加载遮罩体验。
#React
#PJAX
#JavaScript
React 项目中集成 Pjax 失败的经验总结与视觉模拟方案。由于 React 的渲染机制与 Pjax 在脚本加载及 DOM 替换上存在冲突，作者最终决定放弃 Pjax，转而通过拦截 <a> 标签点击事件、延迟跳转以及 CSS 淡出动画来模拟 Pjax 的无刷新视觉效果，并利用 document.referrer 判断来源以优化下一页面的加载遮罩体验。
-
-
-
-
1
-
-
-
-
-
