Best way to handle multi-page forms in Remix?

[kush-daga]

So, I am a bit new to Remix, and have been building my new product using Remix (Loving it!). One common functionality that we have in our web app is multi page forms, essentially breaking up a form into multiple pages to make it easier for user to fill it.

Wanted to understand the best approach of handling this to persist data for all these forms which are essentially on different routes and submit to one action at the end.

For example -
Assume we have a web app that allows a user to create a store. We have broken the process of creating a store into multiple pages (routes) as a design decision.
We can have one /store/create/details route which takes in all the meta details of creating a store (name, desc) and another route /store/create/type for determining the type of the store and at the end we need to submit all the data (name, desc, type) to one api endpoint once its done.

What would be the best way to go about it? Currently we are trying with the Outlet Context method, or using query params (we want to avoid this way). We can probably go around using cookies, to save partial data, but doesnt seem elegant as well.

Given we are a bit new to Remix, was wondering if there is some better way proposed by Remix team to handle this.

One article that I found relevant to this was - https://javascript.plainenglish.io/multi-page-forms-using-remix-and-redis-24d5817301c3 but this introduced using Redis, which again is not what we ideally want.

PS. A more visual way to understand what we want to achieve is the create store experience on the https://www.swell.is/ website, which is essentially a multi page form, but no query params are being used. Wanted to know how to do it the Remix way and without involving a lot of React State.