Javascript 在页面间传递变量的React链接

我在react的

/home

页面上设置了以下链接。按下链接后，我想将变量

stockRow

传递到

/quotes

页面

<Link to = "/quotes" params={{ testvalue: stockRow }} >

---

通过更多研究更新了答案：

下面是使用

Link

第一次进近：

• 将参数作为查询传递。在这种情况下，它将在查询参数中显示为url

• 在组件中接收它，如下所示：

const search=props.location.search；
const params=新的URLSearchParams（搜索）；
const testvalue=params.get（'testvalue'）；
log（testvalue）；

• 注意：还用于解析查询
• 第一种方法的优点是您与其他人共享url，并且数据在刷新时保持不变。还可以通过序列化来传递数组/对象

第二种方法：

• 使用路由参数
• 像这样配置您的路线

转到报价页

• 在组件中接收它，如下所示：

导出默认函数引号（道具）{
让变量=props.match.params.testvalue
返回(
); 
}

• 第二种方法的优点是，您与其他人共享url，并且数据在页面刷新时保持不变。但是，您只能使用最小类型的数据结构，如字符串和数字

第三种方法：

• 将

  链接的
  属性中的数据作为
  状态
  值传递给

我的链接

• 在组件中接收它，如下所示：

导出默认函数引号（道具）{
让变量=props.location.state&&props.location.state.testvalue
返回(
); 
}

• 这样做的好处是，您可以将任何类型的数据传递给state。但是，在页面刷新时，数据不会持久化，您需要在组件中处理这种情况

---

您可以通过路由器参数访问传递的值

export default function Quotes({match}) {

 const { testvalue } = match.params;
 console.log(testvalue);

  return (

  ); 
}

---

'TypeError:undefined'的属性'params'无法读取有什么方法可以解决此问题吗？

export default function Quotes({match}) {

 const { testvalue } = match.params;
 console.log(testvalue);

  return (

  ); 
}