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

Для решения данной задачи в React можем использовать маршрутизацию или условный рендеринг. В обоих случаях нам потребуется использовать компоненты и маршрутизаторы из пакета react-router-dom, поэтому перед тем, как начать, убедитесь, что вы установили его в свой проект.

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

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

Шаг 2: Определите компонент, который будет отображать детали каждой карточки по ее URL. Для этого вы можете использовать компонент "Route" из пакета react-router-dom. Пример:

   import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';

   function App() {
     return (
       <Router>
         <Switch>
           <Route path="/card1" component={Card1} />
           <Route path="/card2" component={Card2} />
           {/* ...and so on for other cards */}
         </Switch>
       </Router>
     );
   }

В этом примере, если пользователь перейдет на /card1, будет отображен компонент Card1, если на /card2, то Card2 и так далее.

Шаг 3: Создайте компоненты для каждой карточки (например, Card1, Card2, и т.д.), и внутри этих компонентов вы можете отображать детали этих карточек или что-то еще, в зависимости от вашего приложения.

Шаг 4: Добавьте ссылки на каждую карточку в вашем приложении. Можете использовать компонент "Link" из пакета react-router-dom, чтобы создать ссылки, которые будут переходить на соответствующую страницу с карточкой. Пример:

   import { Link } from 'react-router-dom';

   function Home() {
     return (
       <div>
         <Link to="/card1">Card 1</Link>
         <Link to="/card2">Card 2</Link>
         {/* ...and so on for other cards */}
       </div>
     );
   }

2. Применение условного рендеринга:
Если вы не хотите создавать отдельные страницы для каждой карточки и предпочитаете отображать их на той же странице, тогда можно использовать условный рендеринг, чтобы показать/скрыть компоненты в зависимости от выбранной карточки.

Шаг 1: Создайте состояние для отслеживания выбранной карточки в компоненте, где отображаются все карточки. Например:

   import { useState } from 'react';

   function CardContainer() {
     const [selectedCard, setSelectedCard] = useState(null);

     const handleClick = (cardId) => {
       setSelectedCard(cardId);
     };

     return (
       <div>
         <Card onClick={() => handleClick(1)} />
         <Card onClick={() => handleClick(2)} />
         {/* ...and so on for other cards */}
         {selectedCard && (
           <CardDetails cardId={selectedCard} />
         )}
       </div>
     );
   }

В этом примере, при клике на каждую карточку, мы устанавливаем выбранную карточку в состояние.

Шаг 2: Создайте компоненты для каждой карточки (например, Card), и при их отрисовке передайте функцию обработчика клика, которая интерактивно устанавливает выбранную карточку.

Шаг 3: Создайте компонент (например, CardDetails), который будет отображать детали выбранной карточки на основе переданного идентификатора cardId. Внутри этого компонента вы можете отображать соответствующие данные.

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