What is best way to route overlays in React

Question

I have a list of teasers in various places on the website. On the home page and on section pages. If you click on a teaser, the (detail) information of the relevant teaser must be shown in an overlay.

The GraphQL query:

query ProductId($id: ID!) {
  productById(id: $id) {
    id
    title
  }
}

I created a route <Route path="*" component={Product} />:

        <Layout>
          <Switch>
            <Route path={SearchPage} component={Search} exact />
            <Route path="*" component={CustomPages} />
            <Route path="*" component={Product} />
          </Switch>
        </Layout>

In the <Teaser /> component I have a Link:

const urlQuery = queryString.parse(location.search);

return `${location.pathname}?${queryString.stringify({ ...urlQuery, productId })}`; 

Then inside <Product /> component, I grep the id from the url and use it for the query variable to fetch the correct data (based on id):

import queryString from 'query-string';
import { useLocation } from 'react-router-dom';

const location = useLocation();
  const queryParams = queryString.parse(location.search);
  const id = queryParams.productId as string;

  const { data } = useQuery<GqlRes, ProductArgs>(GET_PRODUCT, {
    variables: {
      productId: id,
    },
    errorPolicy: 'all',
  });

Here I used query params. Is this correct approach or is it better to use router parameters, like <Route path='/products/:id' component={Product} />? What are the options and pros and cons to consider?