How can multiple pages be model with xstate

Question

I am trying to build a real world application with xstate but I am having trouble with modeling the application startup.

a user can enter the application start by typing the www.ex.com to go the home page but a user can also enter the application www.ex.com/any-page

can someone give an example of modeling application with multiple pages

a user can be unauthenticated an be on the login page or home page but not secure page

or

a user can be authenticated and be on any page

I want each page to have there own state that is what is prompting the question.

Answer 1

I want each page to have there own state that is what is prompting the question.

Don't think of it that way; at least not at first. Use a data-first approach, such as in this example: https://codesandbox.io/s/xstate-react-back-example-4q2vh

The reason is that each page isn't necessarily a "finite state" - it's just data, and all part of the same state (e.g., "viewing a page"). The best way to think about finite state is as an application's behavior at any given time. Does the behavior change when changing pages? Probably not, so use context instead of finite state.