React Router v6: замена withRouter на useNavigate и useLocation Hooks

В React Router v6 концепция withRouterбыла удалена. Вместо этого вы можете использовать хуки useNavigateи useLocationдля достижения аналогичной функциональности.

Вот пример использования этих хуков:

import { useNavigate, useLocation } from 'react-router-dom';
function MyComponent() {
  const navigate = useNavigate();
  const location = useLocation();
  // Access the current URL location
  console.log(location.pathname);
  // Programmatically navigate to a new URL
  const handleClick = () => {
    navigate('/new-route');
  };
  return (
    <div>
      <button onClick={handleClick}>Go to New Route</button>
    </div>
  );
}

В приведенном выше примере useNavigateиспользуется для программного перехода к новому URL-адресу, а useLocationпредоставляет текущее местоположение URL-адреса. Эти хуки можно использовать в функциональных компонентах React Router v6.

Обратите внимание, что теги могут различаться в зависимости от платформы или контекста, в котором вы собираетесь их использовать.