XState not working with next/link

[osequi]

Description
I have a simple application using xstate, react-responsive and next/link. It renders different content on different viewports and different routes.

Expected Result
When navigating from a page to another via links the app should work fine.

Actual Result
When navigating via links the app doesn't work fine, the state seems not to be updated well. When navigating with the browser's arrows all works fine.

Reproduction
https://codesandbox.io/s/prod-butterfly-mbtbm

Additional context
See #995 (comment)

[davidkpiano]

@osequi I can't reproduce this. Clicking the links works fine, as does using browser navigation.

Can you please provide specific steps showing what is broken, and more importantly, showing exactly how it is related to XState (if it is, at all)?

[osequi]

I don't know if it is related to XState, for now. I've recreated the example with Create React App / React Router and the problem persists. Give me a little time and I'll get back to you.

[davidkpiano]

Okay, thanks. Just for cleanup, let's reopen this issue if we can verify that it is in fact an XState issue.

[osequi]

Right, I can confirm the problem was in my XState declarations. It turns out I need transient states and guards, not just simple child states.