title: How do I access the current route on a Next.JS custom 404 page?
body: <p>I have a custom 404 page in my Next.JS app (404.js). On the page, I'd like to display a message like <code>The route &lt;strong&gt;/not-a-route&lt;/strong&gt; does not exist</code>, however when using Next.js's <code>useRouter()</code> and <code>router.pathname</code>, the router thinks I'm on <code>/404</code> and instead displays <code>The route &lt;strong&gt;/404&lt;/strong&gt; does not exist</code>. How do I access the actual route I'm on in a custom 404 page?</p>
  <pre class="lang-js prettyprint-override"><code>export const NotFound: React.FC = () =&gt; {
    const router = useRouter();
    console.log(router.pathname) // prints /404
    return (
      &lt;Layout title='Oops! Something went wrong!'&gt;
        &lt;div className={styles.container}&gt;
          &lt;h1&gt;Oops! Something went wrong!&lt;/h1&gt;
            &lt;p&gt;
              The route &lt;strong&gt;{router.pathname}&lt;/strong&gt; does not exist.
            &lt;/p&gt;
        &lt;/div&gt;
      &lt;/Layout&gt;
    );
  };
  </code></pre>