How to organize the clearance of goods?

Question

JavaScript

The application has a cart (localhost:3000 /cart ):

How do I technically organize checkout from the cart? It is necessary that when you click the "Place an order" button, the route changes, the checkout form is rendered (Address, phone number, etc.). There is a "Confirm" button, after filling in and pressing this button, the route to the "Thank you for the order" page changes again. (localhost:3000/cart /thanks )
How to make routing work in a specific case? And what should be in the address bar after clicking "Checkout"? localhost:3000/cart /maybe-some-random-key
In general, tell me the very logic of the technical organization of this issue

Answer 1

And what should be in the address bar after clicking "Checkout"? localhost:3000/cart/maybe-some-random-key

You need it?
0.* You can check the box that the user has proceeded to checkout (can be used to notify about the incomplete checkout)
1. Are the goods from the basket in the store? If not, then put in the store.
2. The button "Checkout" is a link to the page with the form.
3. After clicking "confirm", if the form is valid, send the action, if you use redux-saga, then the saga intercepts this action, adds data from the basket, makes a request, and if everything is fine, then changes the route to the page with "thank you for the order ", if not, display errors.
If you do not have redux-saga, but redux-thunk or something else, then you need an asynchronous action with the same logic.