Как сделать переход по ссылки с сохранением данных с предыдущей страницы?

Для реализации перехода по ссылке с сохранением данных с предыдущей страницы в React, можно воспользоваться различными подходами и инструментами.

Первый подход основан на использовании маршрутизации, например, с помощью React Router. React Router позволяет определить маршруты для различных страниц в вашем приложении и рендерить соответствующий компонент в зависимости от текущего URL.

Структура URL может выглядеть следующим образом: /page/:id, где :id - параметр, который будет использоваться для передачи идентификатора страницы.

Для сохранения данных с предыдущей страницы можно воспользоваться локальным состоянием компонента или использовать глобальное состояние, предоставляемое библиотеками типа Redux или MobX.

Примерный код для реализации данного подхода может выглядеть следующим образом:

import React, { useState } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

const Home = () => {
  const [data, setData] = useState('');

  return (
    <div>
      <h1>Главная страница</h1>
      <input
        type="text"
        value={data}
        onChange={(e) => setData(e.target.value)}
      />
      <Link to={`/page/${data}`}>Перейти на другую страницу</Link>
    </div>
  );
};

const Page = () => {
  const [data, setData] = useState('');

  return (
    <div>
      <h1>Страница</h1>
      <p>{data}</p>
    </div>
  );
};

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/page/:id">
          <Page />
        </Route>
      </Switch>
    </Router>
  );
};

export default App;

В данном примере создается компонент Home, в котором есть поле ввода для сохранения данных и ссылка, при нажатии на которую происходит переход на другую страницу с передачей данных через параметры URL. Компонент Page получает данные из URL и отображает их. Используется React Router для определения маршрутов и навигации между страницами.

Второй подход основан на сохранении данных в хранилище браузера, таком как localStorage или sessionStorage. При переходе по ссылке можно сохранить данные с предыдущей страницы в хранилище и затем восстановить их на новой странице.

Примерный код для реализации данного подхода может выглядеть следующим образом:

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
  const [data, setData] = useState('');

  const handleLinkClick = () => {
    // Сохраняем данные в хранилище браузера
    sessionStorage.setItem('previousData', data);
  };

  return (
    <div>
      <h1>Главная страница</h1>
      <input
        type="text"
        value={data}
        onChange={(e) => setData(e.target.value)}
      />
      <Link to="/page" onClick={handleLinkClick}>
        Перейти на другую страницу
      </Link>
    </div>
  );
};

const Page = () => {
  const previousData = sessionStorage.getItem('previousData');

  return (
    <div>
      <h1>Страница</h1>
      <p>{previousData}</p>
    </div>
  );
};

export default App;

В данном примере данные сохраняются в sessionStorage при клике на ссылку и потом получаются на новой странице. sessionStorage предоставляет временное хранилище данных, связанное с текущей сессией браузера.

В обоих подходах при переходе по ссылке данные с предыдущей страницы сохраняются и могут быть использованы на новой странице. Выбор подхода зависит от требований и специфики вашего приложения.