反应链接跨页面传递变量

Question

在我的/home页面上，我有以下链接设置。按下链接后，我要将变量stockRow传递到/quotes页面。

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

在我的/quotes页面上，我想知道如何获取该变量？

export default function Quotes() {

let variable = //Grab stockRow

  return (

  ); 
}

Answer 1

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

以下是使用Link传递数据的不同方法

第一种方法：

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

<Link to={{pathname: `quotes`, search: `?testvalue=${stockRow}`}} />

• 在这样的组件中接收它：

const search = props.location.search;
const params = new URLSearchParams(search);
const testvalue = params.get('testvalue');
console.log(testvalue);

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

第二种方法：

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

<Route path="/quote/:testvalue" component={Quotes} />

<Link to=`/quotes/${stockRow}`>Go To Quotes Page</Link>

• 在这样的组件中接收它：

export default function Quotes(props) {

let variable = props.match.params.testvalue

  return (

  ); 
}

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

第三种方法：

• 将to的{​​{1}}属性中的数据作为Link值传递

state

• 在这样的组件中接收它：

<Link to={{
      pathname: '/quotes',
      state: { testvalue: stockRow }
    }}> My Link </Link>

• 此方法的优点是您可以传递任何类型的数据以进行陈述。但是，在页面刷新时，数据将不会持久存在，您需要在组件中处理这种情况。

Answer 2

您可以通过路由器 params

访问传递的值

export default function Quotes({match}) {

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

  return (

  ); 
}