如何修改、传递并访问React Router Link组件中的state状态值

你当前写在Link的to属性内的state是路由跳转时传递给目标路由（也就是/Module1对应页面）的参数，不属于当前组件的可直接访问的响应式状态，所以input处无法直接读取到这个值。

1. 当前组件内控制checkbox状态 #

首先在当前组件声明响应式状态，同步到两个地方：input的checked属性、Link的to.state：

import { useState } from 'react';
import { Link } from 'react-router-dom';

function YourCurrentComponent() {
  // 声明当前组件的响应式状态
  const [isChecked, setIsChecked] = useState(false);

  return (
    <Link
      to={{
        pathname: "/Module1",
        // 同步当前状态到路由跳转参数
        state: { ischecked: isChecked }
      }}
      className={styles.menuCard}
    >
      <h2>Introduction &rarr;</h2>
      <p>Lesson 1</p>
      <input 
        className={styles.checkbox} 
        type="checkbox" 
        // 绑定响应式状态到input
        checked={isChecked}
        // 可选：点击checkbox时同步更新状态
        onChange={(e) => setIsChecked(e.target.checked)}
      />
    </Link>
  )
}

2. 其他组件点击按钮修改勾选状态 #

根据组件层级关系选对应方案：

• 父子/祖先后代组件：将setIsChecked方法通过props/透传传给对应按钮所在组件，按钮点击时调用setIsChecked(true)即可
• 无关联的跨组件：用React Context、Zustand、Redux等状态共享方案，将isChecked状态和修改方法全局共享，其他组件拿到修改方法调用即可同步更新状态

3. 跳转后目标页获取Link传递的state #

如果你在/Module1对应页面需要用到这个勾选状态，用useLocation钩子读取：

import { useLocation } from 'react-router-dom';

function Module1Page() {
  const location = useLocation();
  // 读取Link传递过来的ischecked参数，加默认值避免跳转无state时报错
  const isChecked = location.state?.ischecked ?? false;
  // 后续业务逻辑
}

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