Чтобы передавать данные между маршрутами в React, вы можете использовать несколько методов. Вот некоторые распространенные подходы:

1. Параметры URL-адреса. Вы можете передавать данные через URL-адрес, определяя динамические сегменты в путях маршрута. Доступ к этим параметрам можно получить в целевом компоненте с помощью объекта props.match.paramsили хука useParamsиз React Router.

Пример:

<Route path="/users/:userId" component={UserDetails} />

В компоненте UserDetailsвы можете получить доступ к параметру userId, используя props.match.params.userIdили useParams().

2. Параметры запроса. Другой способ передачи данных — использование параметров запроса в URL-адресе. Параметры запроса добавляются к URL-адресу после вопросительного знака (?) и доступны в целевом компоненте с помощью объекта props.location.searchили хука useLocationиз React. Маршрутизатор.

Пример:

<Route path="/search" component={SearchResults} />

В компоненте SearchResultsвы можете получить доступ к параметрам запроса с помощью props.location.searchили useLocation(). Возможно, вам придется проанализировать строку запроса, чтобы извлечь значения параметров.

3. Библиотеки управления состоянием. Вы можете использовать библиотеки управления состоянием, такие как Redux или MobX, для хранения и обмена данными между различными компонентами и маршрутами. Эти библиотеки представляют собой централизованное хранилище, где вы можете хранить и извлекать данные по мере необходимости.

Пример (с использованием Redux):

1. Определите хранилище Redux с необходимым состоянием.

2. Отправить действия для обновления состояния.

3. Доступ к состоянию любого компонента можно получить с помощью функции connectили таких перехватчиков, как useSelectorи useDispatch.

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

Пример:

// Storing data
localStorage.setItem('key', 'value');
// Retrieving data
const data = localStorage.getItem('key');

5. Context API: Контекстный API React позволяет создавать контекст и обмениваться данными с несколькими компонентами в древовидной структуре. Вы можете определить поставщика контекста на более высоком уровне и получить доступ к общим данным в любом компоненте в области действия поставщика.

Пример:

// Create a context
const MyContext = React.createContext();
// Provide data in a higher-level component
<MyContext.Provider value={data}>
  {/* Nested components */}
</MyContext.Provider>
// Access the data in a nested component
<MyContext.Consumer>
  {value => (
    // Use the value
  )}
</MyContext.Consumer>