Eu tenho um componente "inicial" com links e, quando você clica em um link, o componente do produto é carregado com o produto. Eu também tenho outro componente sempre visível, mostrando links para os "produtos visitados recentemente".

Esses links não funcionam quando em uma página de produto. O URL é atualizado quando clico no link e ocorre uma renderização, mas o componente do produto não é atualizado com o novo produto.

Veja este exemplo:Exemplo de Codesandbox

Aqui estão as rotas no index.js:

<BrowserRouter>
  <div>
    <Route
      exact
      path="/"
      render={props => <Home products={this.state.products} />}
    />

    <Route path="/products/:product" render={props => <Product {...props} />} />

    <Route path="/" render={() => <ProductHistory />} />

    <Link to="/">to Home</Link>
  </div>
</BrowserRouter>;

Os links no ProductHistory são assim:

<Link to={`/products/${product.product_id}`}> {product.name}</Link>

Então eles combinam com oRoute path="/products/:product".

Quando estou em uma página de produto e tento seguir um link do ProductHistory, a URL é atualizada e ocorre uma renderização, mas os dados do componente não são alterados. No exemplo Codesandbox, você pode descomentar o alerta na função de renderização de componentes do produto para ver que ele é renderizado quando você segue o link, mas nada acontece.

Não sei qual é o problema ... Você pode explicar o problema e encontrar uma solução? Isso seria bom!