How to implement the transfer of state when moving to a new page?

Question

React

Hello ladies and gentlemen.

There is such a question. How can you implement the transfer of state from one page to another?

I have a shopping cart (more precisely, a button with the display of the number of goods) - screenshot 1, I add the goods that I added to it into it. If you click on this button, we get into the basket itself.

The cart as such is another page implemented through react-router, and I want to use the same state that some product was originally added to. And accordingly, I check through the console, on the product page, there are added products in the state, and when I pass the same state to the page with the Cart, it is already empty.

How can I implement state saving between two pages? (my guess is local storage and read that redux helps with this, but I only know the name from it)

Answer 1

There is also an option to pass the state through React-router.
Passing via Link to-object
Received via location

Answer 2

you correctly thought about the state manager, for example, redux.
The bottom line is that all your business logic will be stored in one place (store), and you will be able to access the same data from different components.
Use the local state for small things that are important only for the current component, for example, the state of the button (active / inactive).
Here is a link to the editorial.

Answer 3

You can also use custom hooks and useReducer
In your custom hook, you connect userreducer, learn how to do it here
and connect your hook to the component you need