ReactJS组件间传值问题：组件B跳转至组件A时如何传递值？

针对你通过window.location.href跳转传递值的需求，以下是几种可行方案：

方案1：URL查询参数传递 #

这是硬跳转场景下最通用的方式：

1. 在组件B中，先把myvalue存为组件状态（确保跳转时能获取到），再拼接到跳转URL的查询参数中：

// 组件B修改后代码
import { useState } from 'react';

const ComponentB = () => {
  const [myvalue, setMyvalue] = useState("");

  const getvalue = (event) => {                
    setMyvalue("Test value"); // 将值存入组件状态
  };

  function goToPage(url) {
    // 编码后拼接查询参数，避免特殊字符问题
    const fullUrl = `${url}?myvalue=${encodeURIComponent(myvalue)}`;
    window.location.href = fullUrl;
  }

  const gotopage = (event) => {
    goToPage('/ComponentA');        
  };

  // 组件渲染逻辑...
};

2. 在组件A中，解析URL参数并绑定到组件属性：

// 组件A代码
import { useEffect, useState } from 'react';

const ComponentA = () => {
  const [receivedValue, setReceivedValue] = useState("");

  useEffect(() => {
    // 读取URL中的查询参数
    const params = new URLSearchParams(window.location.search);
    const value = params.get('myvalue');
    if (value) {
      setReceivedValue(decodeURIComponent(value));
    }
  }, []);

  // 将值绑定到组件属性，比如渲染到页面或传递给子组件
  return <div>接收的值：{receivedValue}</div>;
};

方案2：本地存储（localStorage/sessionStorage） #

适合不需要在URL暴露参数的场景：

1. 组件B中把值存入本地存储：

// 组件B的getvalue方法修改
const getvalue = (event) => {                
  const myvalue = "Test value";
  localStorage.setItem('transferValue', myvalue); // 存入localStorage
};

// gotopage方法保持不变
const gotopage = (event) => {
  goToPage('/ComponentA');        
};

2. 组件A中读取值并绑定：

// 组件A代码
import { useEffect, useState } from 'react';

const ComponentA = () => {
  const [receivedValue, setReceivedValue] = useState("");

  useEffect(() => {
    const value = localStorage.getItem('transferValue');
    if (value) {
      setReceivedValue(value);
      localStorage.removeItem('transferValue'); // 可选：用完清除，避免残留数据
    }
  }, []);

  return <div>接收的值：{receivedValue}</div>;
};

方案3：路由库状态传递（推荐单页应用） #

如果你的项目使用React Router这类路由库，建议替换window.location.href，用路由自带的状态传递更优雅：

1. 组件B中用路由跳转并携带状态：

// 组件B代码
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

const ComponentB = () => {
  const navigate = useNavigate();
  const [myvalue, setMyvalue] = useState("");

  const getvalue = (event) => {                
    setMyvalue("Test value");
  };

  const gotopage = (event) => {
    navigate('/ComponentA', { state: { myvalue } }); // 传递状态数据
  };

  // 组件渲染逻辑...
};

2. 组件A中读取路由状态：

// 组件A代码
import { useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';

const ComponentA = () => {
  const location = useLocation();
  const [receivedValue, setReceivedValue] = useState("");

  useEffect(() => {
    if (location.state?.myvalue) {
      setReceivedValue(location.state.myvalue);
    }
  }, [location]);

  return <div>接收的值：{receivedValue}</div>;
};

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