如何访问 Next.JS 自定义 404 页面上的当前路由？

Question

我的 Next.JS 应用 (404.js) 中有一个自定义 404 页面。在页面上，我想显示像 The route <strong>/not-a-route</strong> does not exist 这样的消息，但是当使用 Next.js 的 useRouter() 和 router.pathname 时，路由器认为我在 /404 而不是显示 The route <strong>/404</strong> does not exist。如何在自定义 404 页面中访问我所在的实际路线？

export const NotFound: React.FC = () => {
  const router = useRouter();
  console.log(router.pathname) // prints /404
  return (
    <Layout title='Oops! Something went wrong!'>
      <div className={styles.container}>
        <h1>Oops! Something went wrong!</h1>
          <p>
            The route <strong>{router.pathname}</strong> does not exist.
          </p>
      </div>
    </Layout>
  );
};

Answer 1

您可以访问 redirected route 作为 router.asPath。尝试：

import {useRouter} from 'next/router'
export const NotFound: React.FC = () => {
  const router = useRouter();
  console.log(router.asPath)
  return (
    <Layout title='Oops! Something went wrong!'>
      <div className={styles.container}>
        <h1>Oops! Something went wrong!</h1>
          <p>
            The route <strong>{router.asPath}</strong> does not exist.
          </p>
      </div>
    </Layout>
  );
};

如何访问 Next.JS 自定义 404 页面上的当前路由？

How do I access the current route on a Next.JS custom 404 page?

javascript

reactjs

next.js

next-router