У меня есть компонент products
, который перечисляет все продукты в /Products
url. Я пытаюсь сделать еще один компонент 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>
Это то, что вам понадобится - 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
в коде.
Кстати, это не связанная проблема. Но это может быть связано с ценностью to
prop, данной Link
в navbar
. Я думаю, что это будет решено, если вы предоставите /About
реквизиту to
, а не просто About
.
Это сработало, спасибо. У меня теперь другой вопрос, лол. Я на самом деле не хочу получать id
от url
, я хочу передать конкретный product
моему Detail
компоненту из моего Products
компонента, когда я нажимаю кнопку. Есть ли способ добиться этого? потому что я не хочу делать много запросов к моей базе данных.
Найми меня. ржу не могу. Если ценность этого продукта примитивна. Вы можете передать его как id
, в противном случае попробуйте передать объект продукта JSON.stringify
и передать результирующую строку в URL-адрес, но это сделает URL-адрес действительно большим и может также не записывать всю строку. Итак, если этого недостаточно - ищите какое-нибудь решение для управления состоянием, такое как redux и т. д.
Это немного сработало, но не совсем. Например, когда я нахожусь на URL-адресе
Detail/{some integer id}
Если я хочу перейти на своюAbout
страницу и щелкнуть ссылкуAbout
на моей панели навигации, она направит меня на этот URL-адресDetail/About
, даже если я просто хотел перейтиAbout
url.