Блог

У меня есть этот список альбомов, когда я нажимаю на него, я хочу, чтобы на новой странице были данные из этого album.id. Мне нужна информация об альбоме с идентификатором, на который я нажал на обложке компонента.

В основном:

1. Я нажимаю на список с album.id 61a947a868f7d778e3ee73f8
2. Откроется страница «Мой маршрут /пункт»
3. /Страница содержит компонент обложки
4. Я хочу, чтобы компонент обложки получал информацию о компоненте ListItem
5. /Страница элемента отображается каждый раз с информацией об альбоме, на который я нажимаю

Например :

Список.jsx

 function ListItem({index, item}) { const [isHovered, setIsHovered] = useState(false); const [album, setAlbum] = useState({});   useEffect(() =gt; {  const getAlbum = async () =gt; {  try{  const res = await axios.get("/albums/find/"   item , {  headers:{  token: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxOThmM2YwNzdiYzI5ZTkyZTRlZDU5MCIsImlzQWRtaW4iOnRydWUsImlhdCI6MTYzODM2MzkyNSwiZXhwIjoxNjM4Nzk1OTI1fQ.LNyVCvxwCncOWhLS_uGAXBh-WX0GQffe3CeqcMzmZK4"  },  });  setAlbum(res.data);  } catch (e) {  console.log(e)  }  };  getAlbum(); },[item])   return (  lt;Link to={{ pathname:"/itemPage", album:album}}gt;  lt;div className={"listItem"}  style={{left: isHovered amp;amp; index * 225 - 50   index * 2.5}}  onMouseEnter={() =gt; setIsHovered(true)}  onMouseLeave={() =gt; setIsHovered(false)}gt;   {album.id}  

…….

Теперь у меня есть этот элемент альбома, где идентификатор : 61a947a868f7d778e3ee73f8

Моя страница.jsx выглядит так

 const ItemPage = () =gt; { const [lists, setLists] = useState([]); return (  lt;div className={"itemPage"}gt;  lt;Navbar/gt;  lt;Cover/gt;  lt;/divgt; );  

};

Обложка.jsx

 return (  lt;div className={"cover"}gt;  lt;div className="coverImage"gt;  lt;img src="{album.img}" alt=""/gt;  lt;/divgt;  lt;div className="coverInfo"gt;  lt;Cardgt;  lt;CardContentgt;  lt;Typography textAlign={"center"} gutterBottom variant="h5" component="div"gt;  lt;/Typographygt;  lt;Typography variant="body2" color="white" textAlign={"center"} fontSize={150}gt;  {album.rating}  lt;/Typographygt;  lt;/CardContentgt;  {album.date} {album.title}  lt;div className="cardImages"gt;  lt;/divgt;  lt;/Cardgt;  lt;/divgt;  lt;Watch/gt;  lt;Similiar/gt;  lt;/divgt;  

Маршрут App.jsx

 lt;Route path="/itemPage" element={lt;ItemPage/gt;}/gt;  

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

 lt;Route path="/itemPage/:item" element={lt;ItemPage/gt;}/gt;  

В компоненте ItemPage.jsx вы можете использовать хук useParam из react-router-dom для доступа к выбранному идентификатору.

 import { } from "react-router-dom";  let { item } = useParams();  

а затем на странице элементов вы можете вызвать API, чтобы получить данные о выбранном элементе.