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

Question

[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" }}>

Answer 1

[Михаил Нестеров]

В роутере у вас правильно -
path="/products/:id"

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

То есть, в Link нужно передать реальный id продукта. Например из props.match.params.id

Answer 2

[lucky4]

Когда хотим перейти на конкретную страничку какого-то товара и тд, ему нужно передать в параметры переменную:
function ProductItem({ link }) { ....

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

И уже после, можно в атрибуты компонента отдавать либо статически, либо динамически параметр:

<ProductItem 
                link="1" // static
                link={ json.id } // dynamic
            />