В приложениях React динамическое изменение URL-адреса является распространенным требованием, особенно при создании одностраничных приложений (SPA). Хотите ли вы обновить URL-адрес на основе взаимодействия с пользователем или перейти на другую страницу программным способом, в React есть несколько методов, доступных для достижения этой цели. В этой статье мы рассмотрим различные методы с примерами кода, которые помогут вам понять и эффективно реализовать изменения URL-адресов.

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

import { useHistory } from 'react-router-dom';
function MyComponent() {
  const history = useHistory();
  function navigateToNewPage() {
    history.push('/new-url');
  }
  return (
    <button onClick={navigateToNewPage}>Go to New Page</button>
  );
}

2. API истории:
   API истории – это встроенный API браузера, который позволяет управлять историей браузера и программно изменять URL-адрес. Вот пример использования History API для изменения URL-адреса:

function navigateToNewPage() {
  window.history.pushState(null, '', '/new-url');
}

3. Контекст React:
   Если вы хотите изменить URL-адрес компонента, который не подключен напрямую к системе маршрутизации, вы можете использовать контекст React, чтобы передать функцию изменения URL-адреса вниз по дереву компонентов. Вот пример:

import { useContext } from 'react';
import { RouterContext } from 'react-router';
function MyComponent() {
  const router = useContext(RouterContext);
  function navigateToNewPage() {
    router.navigate('/new-url');
  }
  return (
    <button onClick={navigateToNewPage}>Go to New Page</button>
  );
}

4. Параметры запроса.
   Иногда вам может потребоваться изменить только часть URL-адреса, например параметры запроса. React Router предоставляет удобный способ обновления параметров запроса без перезагрузки страницы. Вот пример:

import { useHistory } from 'react-router-dom';
function MyComponent() {
  const history = useHistory();
  function updateQueryParams() {
    history.push({
      search: '?param1=value1&param2=value2',
    });
  }
  return (
    <button onClick={updateQueryParams}>Update Query Params</button>
  );
}

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