时间戳

首页 > 解决方案 > Next.js导出静态html后，如何判断是通过Link跳转还是原生a标签跳转？

html - Next.js导出静态html后，如何判断是通过Link跳转还是原生a标签跳转？

问题描述

条件：导出静态html

如何识别是跳转next/link还是被跳转direct access（即一个标签访问）？

我尝试使用pagePropswith useRouterand _app.tsx，但都失败了。

帮我！

由谷歌翻译

标签： htmlstaticnext.js

解决方案

由于Next/App不会为客户端转换卸载组件，因此您asPath可以useRouter跟踪App从_app.tsx. 如果没有 previous asPath，那么它不是客户端转换。

asPath: String- 浏览器中显示的实际路径（包括查询）

可能的实现：

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

function MyApp({ Component, pageProps }) {
  const { asPath } = useRouter();
  const previousAsPath = usePrevious(asPath);
  useEffect(() => {
    if (!previousAsPath) {
      console.log('Direct access');
    } else {
      console.log(`Come from ${previousAsPath}`);
    }
  }, [previousAsPath]);
  return <Component {...pageProps} />
}

export default MyApp;

推荐阅读