DEV Community
·
介绍 React 页面跟踪器：简化导航跟踪
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
在使用Next.js时，作者需要实现“返回上一页”按钮。简单调用router.back()无法满足需求，因为首次访问时应返回主页。通过原生历史API，作者最终解决了问题，并发布了npm包，提供用户导航跟踪、准确的document.referrer和完整的浏览历史记录。
🎯
关键要点
- 作者需要实现“返回上一页”按钮，使用Next.js时简单调用router.back()无法满足需求。
- 首次访问时，点击返回按钮应返回主页，而不是离开网站。
- 仅通过pathname跟踪用户导航无法解决问题，因为无法区分链接点击和浏览器的前后按钮操作。
- 原生历史API未能提供所需的信息，浏览器的onPopState事件无法告知用户如何到达当前页面。
- 作者最终使用原生历史API解决了问题，并发现document.referrer在Next.js中无法准确跟踪。
- 作者在npm上发布了一个包，提供用户导航跟踪、准确的document.referrer和完整的浏览历史记录。
- 该npm包可以通过命令npm i react-page-tracker轻松安装。
➡️
