Next.js Discord

Discord Forum

Parallel Routes & Intercepting routes are not rendering modal

Unanswered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
## Issue Summary:

### Context:
- I have a Next.js app with a parallel route called @modal that has an intercepting route inside called profile that are rendered in layout as mentioned in docs

### Problem:
- When I navigate from the sign-in page to the root page using router.replace or router.push and try to open modal using Link component
it doesn't render
- Although the URL changes as expected, the modal only appears after doing a hard refresh then try to open it using the same Link component

### Observations:


- URL Change: The URL updates correctly during navigation.
- Modal Not Rendering: The modal doesn't show up after using router.replace or router.push.


### Project structure:

app/
  ├── @modal
  │    └── (...)profile
  │                └── page.tsx
  │    └── default.tsx
  ├── layout.tsx

6 Replies

Polar bearOP
Someone helps?
English Lop
@Polar bear Are you using query params to open modal like ?modalId="ContactUs"? Please share relevant code here
Polar bearOP
Nope
"use client";
import { Modal } from "@/components/";
import { useOnClickOutside } from "@/hooks/utils/useOnClickOutside";
import { useRouter } from "next/navigation";
import React, { useRef } from "react";
import { ProfileForm } from "./form";

function Profile() {
  const router = useRouter();
  const ref = useRef<HTMLDivElement>(null);

  useOnClickOutside([ref], router.back);

  return (
    <Modal ref={ref}>
      <ProfileForm />
    </Modal>
  );
}

export default Profile;
just that code
Modal from shadcn
and form using shadcn also