如何通过按钮点击在React不同页面组件间传递数据

错误原因 #

你现有写法中sendData函数里的<Component data = {data} />代码没有实际作用：这行只是创建了一个React元素实例，既没有被渲染到DOM树中，也没有和路由对应的目标页面组件产生关联，跳转时没有携带数据，目标页自然获取不到内容返回undefined。

可行解决方案 #

以下按适用场景排序：

• 方案1：路由State传参（最适配你的需求）
  基于react-router的内置能力传递数据，参数不会暴露在URL上，适合非敏感、不需要刷新后保留的数据场景。
  跳转页代码修改：

  const sendData= () => {
    // push方法第二个参数可传入自定义state，存放要传递的全部数据
    history.push("/sendData", {
      passData: data // 这里的data就是你要传递的完整变量内容
    });
  };
  
  <Button onClick={sendData} >Click to send data</Button>
  

  目标页接收代码：

  import { useLocation } from 'react-router-dom'
  
  function TargetPage() {
    const location = useLocation()
    // 接收到的完整数据
    const receivedData = location.state?.passData
  
    // 后续正常使用receivedData即可
    return <div>{/* 页面逻辑 */}</div>
  }
  

• 方案2：URL查询参数传参
  适合小体量、可公开的数据，刷新页面后数据不会丢失。
  跳转页代码：

  const sendData= () => {
    // 对象类型数据先序列化再编码，避免特殊字符报错
    const query = `?data=${encodeURIComponent(JSON.stringify(data))}`
    history.push(`/sendData${query}`);
  };
  

  目标页接收代码：

  import { useSearchParams } from 'react-router-dom'
  
  function TargetPage() {
    const [searchParams] = useSearchParams()
    const dataStr = searchParams.get('data')
    const receivedData = dataStr ? JSON.parse(decodeURIComponent(dataStr)) : null
  }
  

• 方案3：本地存储/全局状态管理
  适合数据量大、需要跨页面持久留存的场景，刷新页面不会丢失数据。
  以localStorage为例：
  跳转前存储数据：

  const sendData= () => {
    localStorage.setItem('pagePassData', JSON.stringify(data))
    history.push("/sendData");
  };
  

  目标页读取数据：

  function TargetPage() {
    const receivedData = JSON.parse(localStorage.getItem('pagePassData') || 'null')
    // 数据使用完成后可主动清理避免冗余
    // localStorage.removeItem('pagePassData')
  }
  

  复杂项目也可选择Zustand、Redux、Jotai等全局状态管理库存储共享数据。

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