Trouble with parallel/intercepted routes

Question

I am following the steps in the guide here:
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#modals

But I can't seem to get it to work properly. Using <Link href="/login"> should show my login modal, but instead brings me to a 404 page on development, and on production deployment it just ignores the intercepted route altogether and shows the standard /login page route.

This is my layout code

export default function RootLayout({ children, auth }) {
  return (
    <html>
      <body className={inter.className}>
         <Header />
         <div className="pt-14 min-h-screen">
           {children}
           {auth}
         </div>
         <Footer />
      </body>
    </html>
  );
}

{children} {auth}

Floh · Answer

also getting this error sometimes:Cannot update a component (`HotReload`) while rendering a different component (`Router`).

Trouble with parallel/intercepted routes

1 Reply