React共享组件触发意外导航/URL查询问题求助

核心问题出在你的取消按钮没有指定type="button"，导致在表单内触发了默认提交行为。

为什么会出现这种异常？ #

HTML里的<button>元素默认type是submit，如果这个按钮被包裹在<form>标签内部，点击它就会触发表单的默认提交动作——把表单里的所有参数以GET方式拼到URL里，同时刷新页面。这直接覆盖了你原本打开模态框的逻辑，所以才会出现URL变了、页面刷新的情况。

为什么部分页面正常？ #

• 前两页的IntakeLossButtons组件大概率不在<form>标签的范围内，所以按钮不会触发表单提交
• 审核页可能没有form标签，或者form已经处于不可编辑/提交的状态，自然不会触发提交行为

修复方法 #

给取消按钮加上type="button"属性，明确告诉浏览器这是一个普通按钮，不要触发提交：

<button 
    type="button" // 新增这个属性
    className="btnLink"
    id="cancel-id" 
    tabIndex="0" 
    aria-label={translations.cancelBtnAria ||"Opens a modal to cancel your claim"} 
    color="secondary" 
    onClick={()=>setShowCancelModal(true)}
>
    Cancel Setup
</button>

验证建议 #

你可以检查第三、四页的DOM结构，确认IntakeLossButtons组件是不是被包裹在<form>标签里，这就能验证这个结论的正确性。

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