NextJs Intercepting routes are not rendering

Question

Hi, I'm facing an issue with nextjs Intercepting routes that the aren't rendering the modal of the route but changing the url but it somethimes works when I do hard refresh

app
@modal
(.)profile
default.tsx
layout.tsx

layout.tsx:

import "../styles/globals.css";
import React, { JSX } from "react";
import { ProgressBar, Shadow, Navbar, Toaster } from "@/components/";
import { Poppins } from "next/font/google";
import { cn } from "@/helpers/";
import { AuthProvider } from "@/hooks/context/auth/AuthProvider";
import { getUser } from "@/server-actions/auth.actions";
import { Metadata } from "next";

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "800", "900"],
});

export const metadata: Metadata = {
  title: {
    default: "Sayed Rady",
    template: "%s | Sayed Rady",
  },
};

export default async function RootLayout({
  children,
  modal,
}: {
  children: JSX.Element;
  modal: JSX.Element;
}) {
  const user = await getUser();

  return (
    <html lang="en">
      <body
        className={cn(
          poppins.className,
          "bg-background overflow-x-hidden scroll-smooth"
        )}
      >

          <div className="box flex flex-col relative h-screen overflow-x-hidden">
            <Navbar />
            <div className="container h-full">
              {children}
              {modal}
            </div>
      </body>
    </html>
  );
}

The issue occurs exactly when I use either router.replace or router.push to direct the user back from signin page to the root page

and works when hard reload the page or open it in new tab

{children} {modal}

); }The issue occurs exactly when I use either router.replace or router.push to direct the user back from signin page to the root pageand works when hard reload the page or open it in new tab

Polar bear · Answer

?

NextJs Intercepting routes are not rendering

1 Reply