How to create dynamic react router links in functional components?

Question

React

There is a component for displaying a list of goods by category.
By clicking on a product from the list (Categories), I receive and pass to another (Product) component the prodID of the product and, through GraphQL, load the data of only this product.
The application is strictly on functional components.

Below is a piece of code for better understanding:

<Router>
          <Switch>
            <Route exact path='/'>
              <Categories />
            </Route>
            <Route path='/product/'>
              <Product prodID={prodID} />
            </Route>
          </Switch>
      </Router>

So everything works ok, but when reloading the page of an individual product, the error is logical, because there is nowhere to take the id passed to the component.
In this regard, the question is how to organize the correct operation of such links through React Router?

Answer 1

It's bad practice to pass id like this. Pass it in the url, i.e. '/product/{id}'. Plus it's good for seo