Попытка добавить детальный компонент продукта. React-маршрутизатор

У меня есть компонент products, который перечисляет все продукты в /Productsurl. Я пытаюсь сделать еще один компонент Detail, который отображает определенные product в браузере. Это URL-адрес, который я пытался создать Detail/{some id goes here}. Проблема в том, как я узнаю, какой product нажал, и как я должен показать этот конкретный product в компоненте Detail. У меня есть компоненты Detail и Products.

Мой роутер ниже:

      <Router>
      <NavbarComponent></NavbarComponent>
        <Switch>
          <Route exact path = "/">
            <Home />
          </Route>
          <Route exact path = "/home">
            <Home />
          </Route>
          <Route exact path = "/Products">
            <Products />
          </Route>
          <Route exact path = "/Detail/:int">
            <Detail />
          </Route>
        </Switch>
      </Router>

Я не собираюсь делиться своим Productsкомпонентом, так как он состоит из 200 строк кода. Я просто поделюсь поиском svg в моем Products, что я хочу, чтобы он перенаправлял меня на страницу Detail/{id}, когда я нажимаю.

        {filtered.map((product, index) => {
          return (
            <div key = {index}>
              <div className = "card shadow" style = {{ width: "18rem" }}>
                <img
                  className = "card-img-top"
                  src = "https://dl.airtable.com/.attachmentThumbnails/65708b701baa3a84883ad48301624b44/2de058af"
                  alt = "Card image cap"
                />
                <Link className = "link" to = {"Detail",index}>
                  <svg
                    stroke = "currentColor"
                    fill = "white"
                    stroke-width = "0"
                    viewBox = "0 0 512 512"
                    height = "1em"
                    width = "1em"
                    xmlns = "http://www.w3.org/2000/svg"
                  >
                    <path d = "M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
                  </svg>
                </Link>

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
789
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это то, что вам понадобится - https://reactrouter.com/web/example/url-params/

Таким образом, :int можно использовать в компоненте Detail как const {int} = useParams();. И при обработке клика в компоненте Products вам нужно будет передать идентификатор продукта как /Details/{productId}, используя компонент Link.

Таким образом, после щелчка Link, чтобы перейти к Detail/xyz-product-id, компонент Detail будет отображать этот xyz-product-id как int в коде.

Это немного сработало, но не совсем. Например, когда я нахожусь на URL-адресе Detail/{some integer id} Если я хочу перейти на свою About страницу и щелкнуть ссылку About на моей панели навигации, она направит меня на этот URL-адрес Detail/About, даже если я просто хотел перейти Abouturl.

Ali Ziya ÇEVİK 10.12.2020 07:28

Кстати, это не связанная проблема. Но это может быть связано с ценностью to prop, данной Link в navbar. Я думаю, что это будет решено, если вы предоставите /About реквизиту to, а не просто About.

H S 10.12.2020 07:39

Это сработало, спасибо. У меня теперь другой вопрос, лол. Я на самом деле не хочу получать id от url, я хочу передать конкретный product моему Detail компоненту из моего Products компонента, когда я нажимаю кнопку. Есть ли способ добиться этого? потому что я не хочу делать много запросов к моей базе данных.

Ali Ziya ÇEVİK 10.12.2020 07:44

Найми меня. ржу не могу. Если ценность этого продукта примитивна. Вы можете передать его как id, в противном случае попробуйте передать объект продукта JSON.stringify и передать результирующую строку в URL-адрес, но это сделает URL-адрес действительно большим и может также не записывать всю строку. Итак, если этого недостаточно - ищите какое-нибудь решение для управления состоянием, такое как redux и т. д.

H S 10.12.2020 07:51

Другие вопросы по теме