Router and app flow
Imagine an app with several pages, and you need to implement an app flow which is dependent on different parameters.
Example: you have the start screen. Depending on the user’s type and level and whether they have used the app before, they are then directed to a tutorial or skip straight to main page. Tutorial has different versions depending on the level, from where they are redirected to main as well. They then do something in main, then either get redirected to a screen with a success message, or a screen with a failure message. Maybe there is also an info page that can be accessed from every page.
The user is expected to start on start screen and then is directed through the app. They can not start somewhere in the middle.
How would you implement that?
I’m thinking something using a state machine with the path names as states, and next and previous buttons with transitions depending on user attributes. A middleware to catch every user that does not start on start screen (is not “logged in”). Might even not need the middleware, if I use route masking.
Am I overthinking? Is there an easier way? Obviously, I can just hardcode the the next and previous buttons, but the flow might change and more pages might be added, some might be removed, or the order might get changed. And then going through all the pages and editing every single link just screams for bugs to be introduced.
2 Replies
fair-rose•2y ago
a state machine auch as xstate sounds like a good solution for this
fair-rose•2y ago
you could also store this data here: https://tanstack.com/router/v1/docs/framework/react/guide/static-route-data
Static Route Data | TanStack Router Docs
When creating routes, you can optionally specify a staticData property in the route's options. This object can literally contain you want it to be as long as it's synchronous available when you create your route.
In addition to being able to access this data from the route itself, you can also access it from any match under the match.staticDat...