Как в react сделать переход на другую страницу только для Desktop?

Question

[YaroslavMatveev]

Здравствуйте,
У меня есть пет проект, который я разрабатываю с использованием TypeScript и React, React Router.

Согласно заданию, на главной странице отображаются продукты, и у каждого продукта есть кнопка "Заказать". При нажатии на эту кнопку снизу появляется выдвижная панель (sheet) с информаций конкретного продукта и вариантами оплаты с кнопками "Отменить оплату" и "Оплатить".

Когда пользователь нажимает кнопку "Оплатить", он перенаправляется на страницу с деталями оплаты. У меня есть две страницы для оплаты, и в зависимости от выбранного способа оплаты открывается соответствующая страница.

и вот главное, если смотреть на макет и задание: на десктопной версии, когда пользователь нажимает "Оплатить", он переходит на новую страницу и далее идет реализованный мною процесс оплаты. В то же время, если на мобильных устройствах нажать на кнопку "Оплатить", на страницу не перебрасывать, должна открываться еще одна выдвижная панель с деталями оплаты (деталями оплаты, процессом оплаты который я реализовал в другой странице которая должна открываться на Desktop).

Я не понимаю как в теории можно сделать так, чтобы у меня на страницу перебрасывалось только если пользователь сидит на сайте с Desktop, а если с телефона, то на страницу перебрасывать не нужно и должно открываться выдвижное меню.

Comments

[Ankhena]

Первая же ссылка в гугле https://sky.pro/wiki/html/adaptivniy-render-v-reac... и т.д.

Answer 1

[artemiyzverev]

Самый простой и часто используемый способ — проверять ширину экрана. Например, если window.innerWidth < 768, считаем, что это «мобильный» режим, а если больше — «десктоп». Либо использовать любые другие «брейкпоинты», которые вам подходят.

// Псевдокод, показывающий идею

const handlePayClick = () => {
  // Проверяем ширину экрана
  if (window.innerWidth < 768) {
    // Открываем выдвижную панель с деталями оплаты
    setIsSecondSheetOpen(true);
  } else {
    // Переходим на другую страницу (Desktop-версия)
    navigate('/payment');
  }
};

Есть еще вариант использовать библиотеку react-responsive и ее хук useMediaQuery:

import { useMediaQuery } from 'react-responsive';

function YourComponent() {
  // Определяем, что это мобильная версия, если ширина экрана меньше 768
  const isMobile = useMediaQuery({ query: '(max-width: 768px)' });

  const handlePayClick = () => {
    if (isMobile) {
      setIsSecondSheetOpen(true);
    } else {
      navigate('/payment');
    }
  };

  return (
    <button onClick={handlePayClick}>
      Оплатить
    </button>
  );
}

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