How to pass a link to a separate page?

Question

React

How to make transition to id-component?

There is a routing:

<BrowserRouter>
          <Switch>
            <Route path="/catalog" component={ CatalogPage } exact />
            <Route path="/products" component={ ProductPage } exact />
            <Route path="/products/:id" component={ ItemPage } exact />
          </Switch>
      </BrowserRouter>

And there is the component itself, through which it will be necessary to go to a separate page (ItemPage):

<Link to="products/:id" style={{ textDecoration: "none", color: "inherit" }}>

Answer 1

In the router, you have it right -
path="/products/:id"
And in the Link there should be something like this -
Link to=`products/${id}`
That is, you need to pass the real product id to the Link. For example from props.match.params.id