я есть «домашний» компонент со ссылками, и когда вы нажимаете на ссылку, компонент продукта загружается вместе с продуктом. У меня также есть другой компонент, который всегда виден, показывая ссылки на «недавно посещенные продукты».

Эти ссылки не работают, когда на странице продукта. URL обновляется, когда я нажимаю на ссылку, и происходит рендеринг, но компонент продукта не обновляется с новым продуктом.

Смотрите этот пример:Пример Codesandbox

Вот маршруты в 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>;

Ссылки в ProductHistory выглядят так:

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

Таким образом, они соответствуютRoute path="/products/:product".

Когда я нахожусь на странице продукта и пытаюсь перейти по ссылке ProductHistory, URL обновляется и отображается, но данные компонента не меняются. В примере Codesandbox вы можете раскомментировать предупреждение в функции визуализации компонентов продукта, чтобы увидеть, что оно отображается при переходе по ссылке, но ничего не происходит.

Я не знаю, в чем проблема ... Можете ли вы объяснить проблему и найти решение? Это было бы прекрасно!