如何通过链接触发Next.js页面中的模态框？

完全可行，下面给你两种具体实现方案：

方案一：利用URL锚点（#demo） #

你之前尝试的#demo思路没问题，只是缺少监听锚点并更新模态框状态的逻辑。需要在组件挂载和路由变化时，检查URL的锚点是否匹配，再设置isOpen为true。

Pages Router（Next.js 12及以下）实现代码： #

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Modal from './Modal'; // 替换成你的Modal组件路径

export default function ContactPage() {
  const [isOpen, setOpen] = useState(false);
  const router = useRouter();

  useEffect(() => {
    const checkAnchor = () => {
      // 检查当前URL锚点是否为#demo
      if (window.location.hash === '#demo') {
        setOpen(true);
      }
    };

    // 页面初始加载时检查
    checkAnchor();
    // 监听客户端路由变化（比如从其他页面导航过来）
    router.events.on('routeChangeComplete', checkAnchor);

    // 组件卸载时清理监听
    return () => router.events.off('routeChangeComplete', checkAnchor);
  }, [router]);

  return (
    <div>
      <button type='button' onClick={() => setOpen(true)}>打开模态框</button>
      <Modal id='demo' show={isOpen} onClose={() => setOpen(false)}>
        {/* 这里放模态框内容 */}
      </Modal>
    </div>
  );
}

App Router（Next.js 13+）实现代码： #

'use client';
import { useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import Modal from './Modal';

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

  useEffect(() => {
    // 检查锚点
    if (window.location.hash === '#demo') {
      setOpen(true);
    }
  }, [pathname]);

  return (
    <div>
      <button type='button' onClick={() => setOpen(true)}>打开模态框</button>
      <Modal id='demo' show={isOpen} onClose={() => setOpen(false)}>
        {/* 模态框内容 */}
      </Modal>
    </div>
  );
}

方案二：使用查询参数（比如?modal=demo） #

如果需要支持多个模态框或者传递额外参数，用查询参数更灵活。核心逻辑是读取URL中的查询参数，判断是否要触发模态框打开。

Pages Router实现代码： #

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Modal from './Modal';

export default function ContactPage() {
  const [isOpen, setOpen] = useState(false);
  const router = useRouter();

  useEffect(() => {
    const checkQueryParam = () => {
      // 检查查询参数modal是否为demo
      if (router.query.modal === 'demo') {
        setOpen(true);
      }
    };

    checkQueryParam();
    router.events.on('routeChangeComplete', checkQueryParam);
    return () => router.events.off('routeChangeComplete', checkQueryParam);
  }, [router]);

  return (
    <div>
      <button type='button' onClick={() => setOpen(true)}>打开模态框</button>
      <Modal id='demo' show={isOpen} onClose={() => setOpen(false)}>
        {/* 模态框内容 */}
      </Modal>
    </div>
  );
}

App Router实现代码： #

'use client';
import { useState, useEffect } from 'react';
import { useSearchParams, usePathname } from 'next/navigation';
import Modal from './Modal';

export default function ContactPage() {
  const [isOpen, setOpen] = useState(false);
  const searchParams = useSearchParams();
  const pathname = usePathname();

  useEffect(() => {
    if (searchParams.get('modal') === 'demo') {
      setOpen(true);
    }
  }, [searchParams, pathname]);

  return (
    <div>
      <button type='button' onClick={() => setOpen(true)}>打开模态框</button>
      <Modal id='demo' show={isOpen} onClose={() => setOpen(false)}>
        {/* 模态框内容 */}
      </Modal>
    </div>
  );
}

注意事项 #

• 两种方案都需要确保组件是客户端组件（App Router下要加'use client';指令）
• 如果模态框关闭后希望更新URL（移除锚点或查询参数），可以在onClose回调中调用router.push或router.replace修改URL

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