Data not refreshing after adding entry to database React Router

Question

I have a page where i add products to a product list. After a successful add, the app needs to go back to the list to see the products again with the new entry added. The redirecting to the product list works fine, and i see the products again, but the new product is not on the list. In order to view the new added products, i have to hard reload the page. For some reason the component is not getting re-rendered thus not requesting the new product list from the server.

Why is this happening? How can I make the ProductPage re-render without forcing a full app refresh.

I have reproduced the problem in this codesandbox.

Answer 1

Another way is that you should really hard reload after the submitting the form by adding the following code at the end of the form submit handler function of your form.

      window.location = '/productList';