Как передать данные через react-router?

В React передача данных через react-router осуществляется с помощью параметров маршрута (route parameters) и/или состояния маршрута (route state).

Первый способ - использование параметров маршрута. Вы можете определить определенный путь в вашем маршрутизаторе с динамическим параметром, например, ":id", чтобы передать данные через URL. В компонентах, соответствующих этому пути, вы можете получить данные из параметров маршрута с помощью react-router Hooks или HOC (Higher Order Component).

Например, предположим, у вас есть маршрут "/user/:id", где :id - это параметр маршрута, который должен хранить id пользователя. В компоненте, соответствующем этому маршруту, вы можете получить доступ к параметрам маршрута с помощью react-router Hooks:

import { useParams } from "react-router-dom";

function UserComponent() {
  const { id } = useParams();

  // Используйте полученный id для получения данных пользователя
  // ...

  return (
    <div>
      <h1>User Details</h1>
      <p>ID: {id}</p>
    </div>
  );
}

export default UserComponent;

Второй способ - использование состояния маршрута. Состояние маршрута - это объект, содержащий данные, переданные через маршрут. Вы можете передать это состояние при переходе на другой маршрут с помощью метода history.push() или Link компонента из react-router-dom.

import { Link } from "react-router-dom";

function HomeComponent() {
  const handleClick = () => {
    const data = { name: "John", age: 25 };

    // Передача данных через состояние маршрута
    history.push("/user", { data });
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to User Page</button>
    </div>
  );
}

function UserComponent() {
  const { state } = useLocation();

  // Получить данные из состояния маршрута
  const data = state?.data || {};

  return (
    <div>
      <h1>User Details</h1>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
      <Link to="/">Go back to Home Page</Link>
    </div>
  );
}

export default UserComponent;

Оба способа - параметры маршрута и состояние маршрута - предоставляют возможность передать данные в компоненты, связанные с определенными маршрутами. В зависимости от ваших потребностей и требований проекта, вы можете выбрать наиболее подходящий способ для передачи данных через react-router.