Static page with dynamic routing

I want to have a page /products where I load via javascript a list of products. This works fine. Now I want to link each product to a single page like /product/{product-name-slug} in order to display the product details.

My question: How can I achieve that. When I add a route like :

routes:
  /produkt/{slug}/:
    template: product
    data: page.product

I alway end up with a 404 error.
Does anybody have a solution or idea for that?