使用useNavigate或useSearchParams后返回按钮需点击两次的问题求助

点击label时，浏览器会自动触发内部input的点击事件，若事件冒泡会导致setSearchParams被重复调用；另外，setSearchParams默认会添加新的历史记录条目，即便参数未变化也会生成新记录，多次操作后历史栈中会积累重复条目，导致返回上一页需要多次点击返回按钮。

方案1：将逻辑移至input的onChange事件 #

把参数更新逻辑放到单选框的onChange事件中，仅当选中状态变化时执行，避免重复触发：

let [searchParams, setSearchParams] = useSearchParams();

<label htmlFor="featured">
  <input 
    type="radio" 
    name="sort" 
    id="featured"
    onChange={() => setSearchParams({ sort: "featured" })}
  />
  <span>featured</span>
</label>

方案2：使用replace模式更新搜索参数 #

调用setSearchParams时传入第二个参数{ replace: true }，替换当前历史记录条目而非添加新条目，防止历史栈冗余：

let [searchParams, setSearchParams] = useSearchParams();

<label
  htmlFor="featured"
  onClick={() => setSearchParams({ sort: "featured" }, { replace: true })}
>
  <input type="radio" name="sort" id="featured" />
  <span>featured</span>
</label>

方案3：避免重复执行参数更新 #

执行setSearchParams前先检查当前参数是否已为目标值，仅当不同时才更新：

let [searchParams, setSearchParams] = useSearchParams();

<label
  htmlFor="featured"
  onClick={() => {
    if (searchParams.get('sort') !== 'featured') {
      setSearchParams({ sort: "featured" });
    }
  }}
>
  <input type="radio" name="sort" id="featured" />
  <span>featured</span>
</label>

内容的提问来源于stack exchange，提问作者Nayem Ali Fahim