next.js - how to navigate from intercepted route in nextjs? - Stack Overflow

admin管理员组

文章数量:1122832

I am trying to implement the basic modal using the parallel & intercepting route concept.

When I am in the intercepted route, say "/photo", I want the option to close the modal. So I have attached a close button on the modal. This is the modal component:

    const PhotoModal = ({ children }: Props) => {
        const dialogRef = useRef<ElementRef<"dialog">>(null);
        const { push,back } = useRouter();
    
        function onDismiss() {
            // close modal
            dialogRef.current?.close();
    
            // and go back:
            // back();
push("/");
        }
    
        if (typeof window == "object") {
            return createPortal(
                <dialog ref={dialogRef} onClose={onDismiss} open>
                    <button onClick={onDismiss} className="close-modal-btn">
                        X
                    </button>
                    {children}
                </dialog>,
                document.getElementById("root-modal")!
            );
        }
    
        return null;
    };

On clicking the close button, I want to navigate back to root route ("/"). I have tried:

1. back() -> it takes me to the main "/photo" route.
2. push("/") -> it does takes me to "/" but when I click the link button which takes me to "photo" route nothing happens, it stays in the "/" route. So what I found out was that the intercepted route's page is still there. You can see this effect by muting the dialogRef.current?.close(); line. So my question is how do I go to "/" route?

I am trying to implement the basic modal using the parallel & intercepting route concept.

When I am in the intercepted route, say "/photo", I want the option to close the modal. So I have attached a close button on the modal. This is the modal component:

    const PhotoModal = ({ children }: Props) => {
        const dialogRef = useRef<ElementRef<"dialog">>(null);
        const { push,back } = useRouter();
    
        function onDismiss() {
            // close modal
            dialogRef.current?.close();
    
            // and go back:
            // back();
push("/");
        }
    
        if (typeof window == "object") {
            return createPortal(
                <dialog ref={dialogRef} onClose={onDismiss} open>
                    <button onClick={onDismiss} className="close-modal-btn">
                        X
                    </button>
                    {children}
                </dialog>,
                document.getElementById("root-modal")!
            );
        }
    
        return null;
    };

On clicking the close button, I want to navigate back to root route ("/"). I have tried:

1. back() -> it takes me to the main "/photo" route.
2. push("/") -> it does takes me to "/" but when I click the link button which takes me to "photo" route nothing happens, it stays in the "/" route. So what I found out was that the intercepted route's page is still there. You can see this effect by muting the dialogRef.current?.close(); line. So my question is how do I go to "/" route?

• next.js

Share Improve this question Follow asked Nov 21, 2024 at 13:54 kob003kob003 3,67722 gold badges1717 silver badges2626 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

It seems like an issue with the Next.js, you can fix this by checking pathname using useEffect:

export default function ModalProvider() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (pathname === "/login") {
      setOpen(true);
    }
    return () => setOpen(false);
  }, [pathname]);

  const router = useRouter();

  return (
    <Dialog
      open={open}
      onOpenChange={(open) => {
        if (!open) router.back();
      }}
    >{...}</Dialog>
  );
}

made this work by creating a anchor tag over the close button.

if (typeof window == "object") {
    return createPortal(
        <dialog ref={dialogRef} onClose={onDismiss} open>
            <a href="/">
                <button onClick={onDismiss} className="close-modal-btn">
                    X
                </button>
            </a>
            {children}
        </dialog>,
        document.getElementById("root-modal")!
    );
}

Theres no need of using useRouter in the close button click handler:

function onDismiss() {
    // close modal
    dialogRef.current?.close();

}

本文标签： nextjshow to navigate from intercepted route in nextjsStack Overflow