在Next.js导出静态html之后，我如何判断是跳过链接还是本地标记跳转？

Question

条件:导出静态html

如何识别是由next/link还是由direct access (即标记访问)跳转？

我尝试将pageProps与useRouter和_app.tsx结合使用，但都失败了。

帮帮我!

谷歌翻译

Answer 1

由于Next/App组件不会被卸载用于客户端转换，所以可以跟踪从_app.tsx导出的App组件中的useRouter钩子提供的以前的App。如果没有以前的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;