В React передача данных между компонентами является общим требованием. Один из эффективных способов добиться этого — использовать компонент Link из React Router. В этой статье мы рассмотрим различные методы отправки данных между компонентами с помощью компонента Link, а также примеры кода. Давайте погрузимся!

Метод 1: использование реквизита
Самый простой и понятный способ передачи данных между компонентами — использование реквизита. С помощью компонента Link мы можем передавать данные в качестве реквизита целевому компоненту.

Пример:
В исходном компоненте:

import { Link } from 'react-router-dom';
const SourceComponent = () => {
  const data = { name: 'John', age: 25 };
  return (
    <Link to={{ pathname: '/target', state: { data } }}>Go to Target Component</Link>
  );
};

В целевом компоненте:

const TargetComponent = (props) => {
  const { data } = props.location.state;
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.age}</p>
    </div>
  );
};

Метод 2: использование Context API
Context API позволяет обмениваться данными по дереву компонентов без передачи реквизитов вручную. Обернув компоненты поставщиком контекста, мы можем получить доступ к данным с помощью компонента Link.

Пример:
В исходном компоненте:

import { Link } from 'react-router-dom';
import { DataContext } from './DataContext';
const SourceComponent = () => {
  const data = { name: 'John', age: 25 };
  return (
    <DataContext.Provider value={data}>
      <Link to="/target">Go to Target Component</Link>
    </DataContext.Provider>
  );
};

В целевом компоненте:

import { useContext } from 'react';
import { DataContext } from './DataContext';
const TargetComponent = () => {
  const data = useContext(DataContext);
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.age}</p>
    </div>
  );
};

Метод 3: использование параметров запроса
Параметры запроса можно использовать для передачи данных между компонентами через URL-адрес. Компонент Link позволяет нам легко указывать параметры запроса.

Пример:
В исходном компоненте:

import { Link } from 'react-router-dom';
const SourceComponent = () => {
  const data = { name: 'John', age: 25 };
  return (
    <Link to={`/target?name=${data.name}&age=${data.age}`}>Go to Target Component</Link>
  );
};

В целевом компоненте:

import { useLocation } from 'react-router-dom';
const TargetComponent = () => {
  const { search } = useLocation();
  const params = new URLSearchParams(search);
  const name = params.get('name');
  const age = params.get('age');
  return (
    <div>
      <h1>{name}</h1>
      <p>{age}</p>
    </div>
  );
};

Метод 4: использование локального хранилища.
Локальное хранилище можно использовать для хранения данных, которые необходимо совместно использовать между компонентами. Компонент Link может инициировать получение данных из локального хранилища.

Пример:
В исходном компоненте:

import { Link } from 'react-router-dom';
const SourceComponent = () => {
  const data = { name: 'John', age: 25 };
  localStorage.setItem('data', JSON.stringify(data));
  return (
    <Link to="/target">Go to Target Component</Link>
  );
};

В целевом компоненте:

const TargetComponent = () => {
  const data = JSON.parse(localStorage.getItem('data'));
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.age}</p>
    </div>
  );
};

В этой статье мы рассмотрели несколько методов отправки данных между компонентами в React с помощью компонента Link. Мы рассмотрели такие методы, как использование реквизитов, Context API, параметров запроса и локального хранилища. В зависимости от вашего конкретного варианта использования вы можете выбрать наиболее подходящий метод для эффективной и действенной передачи данных в ваших приложениях React.