Tengo un componente de "inicio" con enlaces, y cuando hace clic en un enlace, el componente del producto se carga con el producto. También tengo otro componente que siempre está visible, que muestra enlaces a los "productos visitados recientemente".

Estos enlaces no funcionan cuando se encuentra en la página de un producto. La url se actualiza cuando hago clic en el enlace y se produce un render, pero el componente del producto no se actualiza con el nuevo producto.

Ver este ejemplo:Ejemplo de código y caja

Aquí están las rutas en 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>;

Los enlaces en ProductHistory se ven así:

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

Entonces coinciden con elRoute path="/products/:product".

Cuando estoy en la página de un producto e intento seguir un enlace de ProductHistory, la URL se actualiza y se produce un render, pero los datos del componente no cambian. En el ejemplo de Codesandbox, puede descomentar la alerta en la función de representación de componentes del Producto para ver que se muestra cuando sigue el enlace, pero no sucede nada.

No sé cuál es el problema ... ¿Puede explicar el problema y encontrar una solución? ¡Eso seria genial!