Реагировать Ссылки передавая переменные по страницам

Question

У меня есть следующая настройка ссылки на моей странице /home в реакции. Как только ссылка нажата, я хочу передать переменную stockRow на страницу /quotes.

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

На моей странице /quotes мне было интересно, как получить эту переменную?

export default function Quotes() {

let variable = //Grab stockRow

  return (

  ); 
}

Answer 1

Обновлен ответ с дополнительными исследованиями:

Ниже представлены различные подходы к передаче данных с использованием Link

1-й подход:

• передать параметры как запрос. В этом случае он будет отображаться как 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);

• Примечание: также используйте строку запроса для анализа запроса
• Преимущество 1-го подхода заключается в том, что вы делитесь URL-адресом с другими, и данные сохраняются при refre sh. Вы также можете передавать массивы / объекты, сериализуя их

2-й подход:

• использовать параметр маршрута
• настроить свой маршрут следующим образом это

<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 с другими, и данные сохраняются на странице refre sh. Однако вы можете использовать только минимальные типы структуры данных, такие как строки и числа.

3-й подход:

• передача данных в to опора Link как state значение

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

• получить его в таком компоненте, как это:

export default function Quotes(props) {

let variable = props.location.state && props.location.state.testvalue

  return (

  ); 
}

• преимущество это то, что вы можете передавать любые данные в состояние. Однако на странице refre sh данные не сохранятся, и вам нужно обработать этот случай в своем компоненте.

Answer 2

Если ваши параметры представляют собой простой открытый текст, просто используйте в качестве параметра запроса:

<Link to=`/quotes?testvalue=${stockRow}`>Example</Link>

Затем в дочернем компоненте:

let variable = props.match.params.testvalue

На случай, если вам нужно передать комплекс Объект в качестве параметров, а затем использовать несколько параметров запроса, как указано выше, все еще возможно. Но я рекомендую использовать Redux Store в этом случае.

Answer 3

Вы можете получить доступ к переданному значению через маршрутизатор params

export default function Quotes({match}) {

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

  return (

  ); 
}