@lucky4

Как передать ссылку на отдельную страницу?

Как сделать переход на id-компонент?

Есть роутинг:
<BrowserRouter>
          <Switch>
            <Route path="/catalog" component={ CatalogPage } exact />
            <Route path="/products" component={ ProductPage } exact />
            <Route path="/products/:id" component={ ItemPage } exact />
          </Switch>
      </BrowserRouter>


И есть сам компонент, через который надо будет переходить на отдельную страничку(ItemPage):
<Link to="products/:id" style={{ textDecoration: "none", color: "inherit" }}>
  • Вопрос задан
  • 46 просмотров
Решения вопроса 2
cooder
@cooder
JavaScript/React/Node.js/PHP/Wordpress/WooCommerce
В роутере у вас правильно -
path="/products/:id"

А в Link должно быть что-то такое -
Link to=`products/${id}`

То есть, в Link нужно передать реальный id продукта. Например из props.match.params.id
Ответ написан
Комментировать
@lucky4 Автор вопроса
Когда хотим перейти на конкретную страничку какого-то товара и тд, ему нужно передать в параметры переменную:
function ProductItem({ link }) { ....

И потом уже если через Link, передать свойство-параметр:
<Link to={ `/products/${ link }` }

И уже после, можно в атрибуты компонента отдавать либо статически, либо динамически параметр:
<ProductItem 
                link="1" // static
                link={ json.id } // dynamic
            />
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы