Как избежать перехода на детальную страницу при клике на кнопку "Добавить" в компоненте PizzaBlock, чтобы добавление товара в корзину выполнялось без перехода на другую страницу?
Для предотвращения перехода по ссылке в дочернем компоненте React при использовании компонента Link можно использовать функцию `event.preventDefault()`.
В случае с компонентом PizzaBlock, чтобы избежать перехода на детальную страницу при клике на кнопку "Добавить", можно добавить обработчик события `onClick` на кнопку и вызвать `event.preventDefault()` внутри этого обработчика.
Пример:
```jsx
import React from 'react';
import { Link } from 'react-router-dom';
const PizzaBlock = () => {
const handleAddToCart = (event) => {
event.preventDefault();
// Добавление товара в корзину
}
return (
<div>
{/* Детальная информация о пицце */}
<Link to="/pizza/details">Детали</Link>
{/* Кнопка для добавления в корзину */}
<button onClick={handleAddToCart}>Добавить</button>
</div>
);
}
export default PizzaBlock;
```
В данном примере, при клике на кнопку "Добавить" будет вызываться функция `handleAddToCart`, которая предотвращает переход на детальную страницу пиццы с помощью `event.preventDefault()`.
Вы можете использовать `event.preventDefault()` в обработчике кнопки, чтобы отменить действие, которое обычно происходит после клика на кнопку. Если вы выведете в консоль `event.cancelable` и значение равно `true`, это значит, что событие может быть отменено. При вызове `event.preventDefault()` событие будет отменено. Вот документация для более подробной информации: ссылка на документацию.
просто вызови preventDefault() в обработчике кнопки, чтобы отменить действие, которое обычно происходит после клика на кнопку. Если event.cancelable равно true, это значит, что событие может быть отменено и вы можете использовать preventDefault() чтобы отменить событие. Документация: ссылка на документацию.