Как сделать карточки, чтобы при нажатии на неё переходило на другую страницу по её ID?

Question

[SamPorter]

Я пишу на реакт, решил попробовать на чистом js написать, вышла проблема, не могу вывести данные из API и сделать так чтобы при нажатии на определённую карточку я переходил на другую страницу где будут отображаться все данные находящиеся в этой карточке. А так карточка в начала выглядит как превью.

Comments

[Алексей Ярков]

А конкретнее? Вы событие клика обрабатывать не умеете? Или роутинг не осилили? Где проблема?

[SamPorter]

Алексей Ярков, и то и другое, я вообще не понимаю как это реализовать

Answer 1

[Вадим Лебеденко]

Итак, могу предложить следующее:
HTML:

<div id="card" source="https://ссылка_для_перехода">
          <p>Some text</p>
     </div>

JS:

let card = document.querySelector("#card")

card.addEventListener("click", function(){
     let href = document.createElement("a")
     href.src = card.source

     document.body.append(href)
     href.click()
     href.remove()
})

Можно также обойтись совсем без JS:

<a href="https://ссылка_для_перехода">
     <div id="card" source="hhtps://ссылка_для_перехода">
          <p>Some text</p>
     </div>
</a>

P.S. второй вариант может не работать.
P.S.S. если и первый не будет работать - пиши в коменты.

Comments

[SamPorter]

Вадим Лебеденко Спасибо за ответ, но код не работает

[Михаил Ливач]

SamPorter , покажите код. Слишком мало информации

[SamPorter]

Михаил Ливач, кода нету, потому что я не знаю как это реализовать, вот и задал вопрос

[Михаил Ливач]

SamPorter, Вы пишете:

не могу вывести данные из API и сделать так чтобы при нажатии на определённую карточку я переходил на другую страницу

Покажите, какие данные приходят из API, и как на основе этих данных вы генерируете карточки.