React-Bootstrap多模态框无法弹出问题求助

核心问题分析 #

1. 状态类型不匹配：MyApp中show状态被设置为对象（如{show: 'login'}），但Login组件用show === "login"判断，对象与字符串永远不相等，导致模态框触发条件不成立。
2. 关闭逻辑错误：当前handleClose设置的是{show: id}，id为空字符串，无法正确重置状态关闭模态框。
3. 导航链接默认行为未阻止：href="#"会触发页面刷新，打断模态框的显示逻辑。

1. 修正MyApp中的状态与处理函数 #

将show状态改为直接存储模态框ID字符串，同时修正关闭逻辑：

function MyApp({Component, pageProps}) {
    const [show, setShow] = useState(null)
    
    // 关闭模态框时重置状态为null
    function handleClose() {
        setShow(null);
    }

    // 打开模态框时直接传入对应ID
    function handleShow(id) {
        setShow(id);
    }
    
    // 其余代码保持不变
}

2. 修正模态框的显示判断逻辑 #

Login组件中修改Modal的show属性判断：

// Login.jsx
<Modal show={show === "login"} onHide={handleClose} fade={false}>

同理，SignUp组件的Modal需修改为：

// SignUp.jsx
<Modal show={show === "signup"} onHide={handleClose} fade={false}>

3. 阻止导航链接的默认跳转行为 #

点击登录/注册按钮时，阻止页面刷新：

<Nav.Link 
  href="#" 
  onClick={(e) => {
    e.preventDefault();
    handleShow('login');
  }}
>
  <FontAwesomeIcon icon={solid('sign-in-alt')}/><span>&nbsp;Login</span>
</Nav.Link>
<Nav.Link 
  href="#" 
  onClick={(e) => {
    e.preventDefault();
    handleShow('signup');
  }}
>
  <FontAwesomeIcon icon={solid('user-plus')}/><span>&nbsp;Sign up</span>
</Nav.Link>

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