React中scrollIntoView失效：页面重载且URL追加?问题求助

安全阿岳

2026-8-6

问题原因

你的PostProperty页面中，触发滚动的按钮都嵌套在<form>标签内，而HTML里<button>的默认type是submit——点击这类按钮会自动触发表单的默认提交行为，发起GET请求导致页面重载，URL末尾追加?，同时路由无法匹配这个带参数的路径，所以出现"No routes matched location"错误。

反观登录页面，触发滚动的Sign Up/Log in按钮都不在<form>标签内部，自然不会触发表单提交，所以滚动逻辑正常运行。

解决方法

有三种可行的修复方式：

1. 给按钮指定`type="button"`

修改按钮代码，明确设置按钮类型为普通按钮，避免触发表单提交：

<button type="button" onClick={handleOneTwo}>
  btn
</button>

<button type="button" onClick={handleTwoOne}>
  backbtn
</button>

2. 在点击事件中阻止默认行为

在滚动处理函数里添加e.preventDefault()，拦截表单的默认提交动作：

const handleOneTwo = (e) => {
  e.preventDefault(); // 阻止表单默认提交
  stepTwo.current?.scrollIntoView({ block: "nearest", behavior: 'smooth' });
};

const handleTwoOne = (e) => {
  e.preventDefault();
  stepOne.current?.scrollIntoView({ block: "nearest", behavior: 'smooth' });
};