如何在复选框选中时实现编程式导航至Page2组件？

你可以直接在复选框的onChange事件处理函数中，根据当前复选框的选中状态触发编程式导航。由于setChecked是异步操作，推荐通过事件对象的target.checked获取实时状态，避免依赖checked状态变量产生判断偏差。

修改后的代码如下：

import { useState, useNavigate } from 'react';

export default function Home() {
  const [checked, setChecked] = useState(false);
  const navigate = useNavigate();

  const handleChange = (e) => {
    const isChecked = e.target.checked;
    setChecked(isChecked);
    // 复选框选中时导航到Page2
    if (isChecked) {
      navigate('/page2'); // 替换为你Page2对应的实际路由路径
    }
  };

  return (
    <>
      <input type="checkbox" onChange={handleChange} checked={checked}></input>
    </>
  );
}

关键说明 #

• 增加checked={checked}绑定状态，确保复选框UI与状态变量同步
• 用e.target.checked获取当前复选框的真实选中状态，规避setChecked异步更新带来的判断错误
• 当isChecked为true时，调用navigate方法跳转到目标路由，若需要取消选中时也导航，可在else分支补充对应逻辑

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