React how to open a product card in a new browser window without losing data?

Question

JavaScript

Good afternoon.
The task was to open a product card in a new browser window when clicking on the details button.
But the problem is that the data in the new window is lost. And a blank page is rendered.
Please tell me how to solve this problem.

Answer 1

I don't think this is a very good approach in using SPA.
The solution, I think, is to write the necessary data to localStorage before opening a new tab.
Read more about localStorage here .

Answer 2

IndexDB if local.
If for good, then receive data from the server.
or you can use Router, but as far as I understand it will be necessary to do everything in 1 tab

Answer 3

react-router-dom
https://reactrouter.com/web/guides/quick-start

The task was to open a product card in a new browser window when clicking on the details button.

i.e. something along the lines of

<a href="/item/item_name" target="_blank">Go to item</a>

and somewhere in the app to catch

<Route path='/item/:item_name' exact render={props => <ItemPage {...props} />} />

I’m not responsible for the modern router-dom syntax, I haven’t touched it for a while