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

Question

Condition: Export static html

How to recognize whether to jump by next/link or by direct access (that is, a tag access)?

I tried using pageProps with useRouter and _app.tsx , but both failed.

Help Me!

Translated by Google

Answer 1

Since the Next/App component will not be unmounted for client-side transitions, you can track the previous asPath provided by the useRouter hook inside the App component exported from _app.tsx . If there is no previous asPath , then it is not client-side transitions.

asPath : String - Actual path (including the query) shown in the browser

Possible implementation:

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;