state machine driven routing (xstate & react-router integration)

[henrymontoya21]

I'm working on an integration between xstate, @xstate/react, and react-router to manage complex flows in my application. The benefits that I think xstate offers here is to consolidate routing logic that is currently spread throughout the application in a single place, and also provide documentation of these flows in statecharts. I've built a basic POC that works, but as an xstate newbie I'd like to get some feedback on the implementation to see what could be improved.

Here is a codesandbox with a basic implementation of the above integration: https://codesandbox.io/s/xstate-react-router-u472if?file=/src/App.js. I've commented it out to help provide context for various parts of the code.

To summarize the implementation, each state corresponds to a route path. Within each state, events correspond to CTAs on the page, e.g. a 'Continue' or 'Back' button. URL state is synced to the machine state using history.push within the service.onTransition callback.

I'm open to any and all feedback, but there are a couple points which I'm especially interested in getting feedback on:

• tightening the integration between xstate and react-router (in MachineProvider.js)

The current implementation uses service.onTransition inside a useEffect to watch for state changes and subsequently call history.push or history.replace to sync the url state to the machine state.

To manage popstate events I have a separate subscription using react-router's history.listen. The callback to history.listen checks for popstate events to send an event (named 'syncState') to the machine to set the machine state to the current pathname.

Is there a better point of integration between the two libraries, so that url state is driven by the xstate state machine that still allows the machine state to sync to popstate events or navigation by url? Am I mixing xstate paradigms by using both service.onTransition and useInterpret hook?

• protected route patterns and managing redirects

What is the best way to protect routes behind a certain condition so that if a user tries to navigate directly to a route by url, the app will redirect to a different route if the condition is not met? Does it make sense to use an entry action that reads a value from context and history.push if the condition is not met? or is there an alternative approach?

What about the case where we are checking for a value in location.state and if it is not there, we want to redirect back to the page/form where that value should be set via history.push('/route', state)? see Form3.jsx

Is there a way to handle this so that all of the redirect logic/action is contained within the state machine?

• root redirects where a user is navigated to one of several routes based on conditional logic (in useCreateMachine.tsx)

In my implementation, at the initial state "/" I invoke an api call that is set to context and sets the machine state to "_redirect_". This state has an always determines where to redirect the user based on conditional guards. Is there a better way to do this where I don't need a "_redirect_" state? It stands out as the only state in the machine which is not associated to a route.

Again, I'd appreciate any feedback on this approach and if anyone else has tackled this integration I'd be really curious to see some alternate approaches.

**note - will have to update away from using history.listen as it no longer exists in react-router v6. the new useNavigationType hook will probably fill the gap

[huang47]

I'm also interested in this approach too! it's very inspiring! just wondering have you tried something like https://github.com/carloslfu/xstate-router which add routes to your XState machine and maintain it in sync with the actual route?

[redbar0n]

FWIW, here are some resources:

• Xrouter: https://github.com/ChrisShank/xrouter
• Xrouter creator presentation about The impact statecharts had on web routing
• Doc of various routing approaches: My routing ideas gist

[huang47]

thanks @redbar0n this is awesome

[christophe-g]

This might also be of interest: https://github.com/lit-apps/lit-app/tree/dev/packages/xstate-route

It is a lit controller binding actor state machine with a router (router-slot) - very early preview.

[baohouse]

This is a great example! But looks like there were breaking changes with both XState v4 to v5 and React Router v5 to v7. I forked the codesandbox https://codesandbox.io/p/sandbox/xstate-react-router-6k4rcg to upgrade to the latest XState 5, React 19, React Router 7, and TypeScript 5.8, and began upgrading to all the new APIs, but it's a work in progress. Some things don't seem to migrate well, such as meta on transitions.