Next.js拦截路由中如何正确导航至根路由？

你的核心问题出在路由导航的历史记录处理上，以下是具体原因和修复方案：

问题根源 #

• 使用back()：你的历史栈中上一条记录是主/photo路由（而非根路由/），所以调用back()会回到主页面而非根路由。
• 使用push("/")：会在历史栈中新增一条/的记录，此时历史栈为[/, /photo, /]。再次点击/photo链接时，浏览器会触发历史前进操作而非全新导航，导致Next.js的拦截路由逻辑未重新触发，模态框组件残留。

正确解决方案 #

使用router.replace("/")替代push("/")，它会替换当前的/photo历史记录条目为/，确保历史栈仅保留[/]。下次点击/photo链接时会触发全新导航，拦截路由能正常工作。

同时可以简化组件逻辑：当路由切换到/时，拦截路由组件会被自动卸载，无需手动关闭dialog。

修改后的代码 #

const PhotoModal = ({ children }: Props) => {
    const { replace } = useRouter();

    function onDismiss() {
        // 替换当前路由为根路由，组件会自动卸载，dialog随之从DOM移除
        replace("/");
    }

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

    return null;
};

并行路由补充配置（若使用@modal场景） #

如果是通过并行路由（如@modal/(.)photo）实现的模态框，需在@modal目录下添加default.tsx，确保路由回到/时并行路由区域渲染空内容：

// app/@modal/default.tsx
export default function DefaultModal() {
    return null;
}

内容的提问来源于stack exchange，提问作者kob003